Adobe

decor

Web Platform Team Blog

Making the web awesome

SVG animations, CSS Animations, CSS Transitions

Recently there was a discussion in the SVG working group how SVG Animations (based on SMIL Animations), CSS3 Animations and CSS3 Transitions contribute to the animation sandwich model for SVG presentation attributes.

SVG presentation attributes

First, what are SVG presentation attributes? In SVG, a subset of all CSS properties can be set by SVG attributes. Examples of these attributes are fill, stroke, font-size or filter. These attributes are called “presentation attributes”. Presentation attributes provide a shorthand way of setting a specific CSS property on a SVG node. For example:

<rect fill="teal" .. />

specifies the fill CSS property on the rect element.

A list of all SVG presentation attributes can be found in the SVG 1.1 specification.

Presentation attributes contribute to CSS cascading as shown in the graphic above. They can be set by external style sheets, document styles or inline styles (with the style attribute). Therefore the fill property can also be set by

<rect style="fill: teal;" .. />

or

<style>
    .tealRect {
        fill: teal;
    }
</style>
<rect class="tealRect" .. />

Settings on one style override settings of previous styles in the CSS cascade. For example the fill property can be set for a group of elements, for a certain element in the DOM, or for elements with a certain class or id.

Animation of presentation attributes

But presentation attributes have another benefit. They can get animated by SVG Animations, CSS Animations and CSS Transitions. The following examples demonstrate different animations applied to presentation attributes.

<svg xmlns="http://www.w3.org/2000/svg">
<style>
    rect {
      	fill: black;
    }

    rect:hover {
      	fill: teal;
      	transition-property: fill;
      	transition-duration: 3s;
    }
</style>

<rect width="100" height="100" />
</svg>

 

<svg xmlns="http://www.w3.org/2000/svg">
<style>
      @keyframes fill {
          from {
              fill: black;
          }
          to {
              fill: teal;
          }
      }

      rect {
          fill: black;
          animation-name: fill;
          animation-duration: 3s;
      }
</style>

<rect width="100" height="100" />
</svg>

 

<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100">
    <animate attributeName="fill" from="black" to="purple"
        dur="3s" begin="mouseover" />
</rect>
</svg>

The animation sandwich model

The SMIL Animation sandwich model describes how multiple animations stack-up and interact when they run at the same time and target the same property of the same object. The model explains how higher priority animations are on top of lower priority ones and how each animation uses a base value that comes either from the lower priority animation or, in case there is none, from the animated element itself.

The following example demonstrates how two animations on the same attribute affect the value of the attribute itself:

<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100px" height="100px">
    <animate attributeName="width" from="50px" to="150px"
        dur="4s" begin="1s" id="anim1" />
    <animate attributeName="width" from="200px" to="100px"
        dur="4s" begin="3s" id="anim2" />
</rect>
</svg>

The two animations of the width attribute in this example above contribute to the animation sandwich model as follows:

In the combination on the example above, the second animation has a higher priority and overrides the first animation.

The definition for “The animation sandwich model” in SMIL 3.0 Animation says this about CSS properties:

… When animation is applied to CSS properties of a particular element, the base value to be animated is read using the (readonly) getComputedStyle() method on that element. The values produced by the animation are written into an override stylesheet for that element …

The computed style gives limited access to the computed value of a property after stepping through CSS cascading. But what does that mean for CSS Animations and CSS Transitions? Are CSS Animations and Transitions included in the computed style? Yes they are! But this doesn’t really help. All animations, independent if SMIL- or CSS-based, are included in the computed style of the property. So the question is: Which animation applies to the property of the element first? Is it SMIL Animation (SVG Animation), CSS Animations or CSS Transitions?

SMIL 3.0 Animation was published in 2008, before CSS Animations or CSS Transitions came up on the screen. Neither CSS Transitions nor CSS Animations closed the gap and specify how and if different animation types can be used together. But how do current user agents deal with different animations? Lets take a look at various combinations.

Combining CSS Animations with CSS Transitions

Even if not specified yet, the behavior of all major browsers is pretty clear about the interaction of CSS Animations and CSS Transitions. If both get applied to a property of an element, then CSS Animations override CSS Transitions. The result is as if no CSS Transitions were specified during the time CSS Animations are running.

Combining CSS Animations with SVG Animations

But there is still the question about the interaction of CSS Animations with SVG Animations. Lets take a look how Firefox, Safari and Chrome address that.

<svg xmlns="http://www.w3.org/2000/svg">
<style>
      @keyframes fill {
          from {
              fill: black;
          }
          to {
              fill: teal;
          }
      }

      rect {
          fill: black;
          animation-name: fill;
          animation-duration: 3s;
      }
</style>

<rect width="100" height="100">
    <animate attributeName="fill" from="black" to="purple"
        repeatCount="indefinite" dur="3s" />
</rect>
</svg>

The code example above demonstrates an animation with CSS and SVG of the fill property. Both animations start after loading the document. While the CSS Animation changes fill color from black to teal, the SVG Animation animates the value of fill from black to purple. What happens?

Mozilla Firefox

Firefox supports SVG Animations on all presentation attributes that can be animated. Most presentation attributes can be animated with CSS Animations and CSS Transitions as well.

For current releases of Firefox or a Nightly build the fill color of the rectangle in the example will change from black to teal in 3 seconds. CSS Animations override both CSS Transitions and SVG Animations.

Safari and Chrome

Safari and Chrome have support for SVG Animations, CSS Animations and CSS Transitions in their latest nightly builds for most presentation attributes as well. As in Firefox, CSS Animations override SVG Animations when they are running. The fill color of the rect changes from black to teal.

Combining CSS Transitions with SVG Animations

Now that we know that CSS Animations override all other kind of animations, what about the combination of CSS Transitions and SVG Animations? The following example has a CSS Transition and an SVG Animation. Both start once the mouse hovers over the rectangle.

<svg xmlns="http://www.w3.org/2000/svg">
<style>
    rect:hover {
      	fill: teal;
      	transition-property: fill;
      	transition-duration: 3s;
    }
</style>

<rect width="100" height="100">
  <animate attributeName="fill" from="black" to="purple"
        dur="3s" begin="mouseover" />
</rect>
</svg>

The CSS Transition changes fill color from black to teal and the SVG Animation animates the value of fill from black to purple. What happens?

Mozilla Firefox

On hovering the mouse over the rectangle in Firefox, the fill color turns from black to teal in 3 seconds smoothly. CSS Transitions override SVG Animations. If you remove the mouse from the rectangle before the 3 seconds expire, you will notice that the color turns from dark purple to purple. This is because the CSS Transition ended and does not override the SVG animation any longer.

Safari and Chrome

The result on Safari and Chrome is different. In the current version of Safari, the rectangle changes color from black to purple in 3 seconds. A WebKit nightly or Chrome demonstrate a bug in the underlying rendering engine WebKit. On hovering over the rectangle nothing happens. After waiting three seconds the fill color changes from black to teal for another three seconds. If the mouse leaves the area of the rectangle before the animation stops, the fill color animates toward purple. This behavior is not always reproducible. The behavior can also differ after a reload of the page and is not the desired result.

Other browsers

Other major browsers don’t support the combination of SVG Animations with CSS Animations or CSS Transitions. This is either because the browser does not support SVG animation at all, like MS Internet Explorer, or no public builds are available which would support CSS Animations or CSS Transitions on presentation attributes, as is the case for Opera.

Conclusion

While SMIL 3.0 Animation has a model for combining multiple concurrent SMIL animations in a common animation model, that model does not take CSS Animations and CSS Transitions into account. Likewise, while browsers have a common way of combining CSS Animations and CSS Transitions, there is no common animation model which combines all types of animations: SMIL 3.0 Animation, CSS Animations and CSS Transitions.

Therefore web developers should not try to combine SVG Animations with one of the CSS animation models at the moment.

The combination of the different animation models is still interesting. For example, SVG animations allow complex animation synchronization and timing which is useful in more elaborate animation scenarios. We hope this type of issue will be addressed in the Web animation efforts that are starting.

Also, the SVG working group is currently looking at turning more SVG attributes into presentation attributes. The first step is already done with CSS3 Transforms, which merges the SVG transform attribute and the CSS transform property.

6 Comments

  1. March 31, 2012 at 8:07 pm, Oour said:

    What about Opera? They seem to have best SVG support. Does it hold for transitions as well?

    • April 01, 2012 at 12:16 am, dschulze said:

      At least the latests public builds of Opera that I tested didn’t support CSS Transitions or CSS Animations on SVG presentation attributes.

  2. March 31, 2012 at 9:20 pm, Software | Pearltrees said:

    […] SVG animations, CSS Animations, CSS Transitions | Web Platform Team Blog 6 .tealRect { 5 fill: teal; 4 } […]

  3. April 05, 2012 at 6:45 am, Amruth Raj said:

    It worked for me nicely. Thank you team… :)

  4. May 28, 2012 at 3:03 am, Oswald said:

    You might enjoy some eye-candy code samples using pure CSS3:
    https://code.google.com/p/css3-graphics/

    These code samples use jQuery+CSS3:
    https://code.google.com/p/jquery-css3-graphics/

    These code samples use pure SVG:
    https://code.google.com/p/svg-filters-graphics/

  5. April 15, 2013 at 12:01 pm, Rootpak.net said:

    This is technology, but we will need tools to produce complex animations