F2F/Auckland 2011/CSS Animation
My initial proposal here on aligning CSS animations and transitions on SVG is to stage the process. We discussed at TPAC and agreed that CSS Animations (combined with Transitions) has the long term goal of supporting all of the functionality in SMIL. Below is an attempt at identifying a first stage to make progress. It defines some key high level scenarios, and then proposes a first step solution to solving them.
[There are also some notes I have on the talk page that will be integrated into this page eventually. --heycam 23:48, 20 February 2011 (UTC)]
[Also I wonder whether we really agreed to have CSS Animations/Transitions support all the functionality of SMIL. There's some crazy stuff in SMIL with marginal utility!] --heycam 03:02, 23 February 2011 (UTC)
Scenarios
Advertisements
A softdrink company would like to create a visually compelling advertisement that includes text, raster graphics and vector graphics. The advertisement has movement to be eye-catching. The text moves on the screens, the graphics glow (see filters on html proposal) and bubbles float up the screen).
Logos
A designer exports a client’s logo from Illustrator, and instead of embedding it on a web page as a GIF image, it can now be embedded at SVG and scale up for high DPI monitors. Additionally, instead of using 3rd party plug-ins, it can spin and whirl and glow, is accessible, and localizable.
Gaming or Game Title Screens
A premiere Web and Windows Web App scenario is casual gaming. Causal gaming often includes raster images/sprits and/or SVG images or fragments. Deterministic animations (such as following a path for tower defense) can be experienced via standard web technologies by applying CSS animations to SVG (including raster images). Selection effects on graphic menus or game pieces can also be added through transitions on shapes, positions or filters on these objects.
Background or Desktop Scenes
Rich graphic experiences mean fewer static experiences and overall better user experiences. These include subtle background themes with light, animated filter effects or full scene animations.
Queues and Triggers on UI
Modern user experiences indicate to users when things happen and how to make things happen using triggers and queues. Since UI is no longer rectangular, transitions on vector graphics are just as important. Whether a queue (a transitioned glow and/or transitioned size/rotate) on the graphic that a new UI element is available, or a transition that occurs such as an opacity or color shift triggered off a user gesture, these experiences have been proven beneficial to a user’s comprehension of how an interface works, and need to expand beyond boxes and lines.
Proposed Solution
To achieve early success on these scenarios with limited impact on implementations and limited churn
- Introduce the attr() function syntax into CSS Animations and Transitions
<style>
rect { animation: a 0.5s both infinite }
@keyframes a {
from { fill: red; attr(x):100px }
to { fill: gold; attr(x):110px }
}
</style>
<rect x="100" y="100"/>
attr() would also apply to transitions:
<style>
rect { transition: attr(x) 0.5s;}
}
</style>
Presentation Attributes
SVG animations and Transitions already apply to Presentation Attributes that span SVG and HTML (opacity, font-weight, visibility). The list of Presentation Attributes below that do not appear to be specified as part of the CSS Animations or Transitions specifications.
These attributes are of types color and number. The interpolation of these types are already well defined in the CSS specifciations.
- fill-opacity
- flood-color
- flood-opacity
- stroke
- stop-color
- stop-opacity
- stroke-dashoffset
- stroke-opacity
- stroke-width
Regular Attributes
This list is currently contained to number,percentage, integer and length with two exceptions. Numbmer-optional-number and transforms. The latter already has sufficient interpolation documentation. The purpose of the restrained set is to reduce the cost of evaluating all types, though the desire is to eventually support animating all animatable SVG attributes.
- Filters
- amplitude - number
- azimuth - number
- bias - number
- diffuseConstant - number
- divisor - number
- dx - number*
- dy - number*
- elevation - number
- exponent - number
- k1 - number
- k2 - number
- k3 - number
- k4 - number
- limitingConeAngle - number
- numOctaves - number
- offset - number,percentage
- pointsAtX - number
- pointsAtY - number
- pointsAtZ - number
- radius - number-optional-number
- scale - number
- slope - number
- specularConstant - number
- specularExponent - number
- stdDeviation - number
- surfaceScale - number
- targetX - integer
- targetY - integer
- intercept - number
- Gradients
- fx - length
- fy - length
- Size/Position
- cx - length
- cy - length
- height - length
- r - length
- rx - length
- ry - length
- startOffset - length,percentage
- transform - *
- width - length
- x1 - length
- x2 - length
- y1 - length
- y2 - length
- x - length
- y - length
- z - length
I worry a bit about converting basic dimension attributes into properties but not more exotic ones, like rotate on text. I think users would be confused that you could style x on text but not rotate. --heycam 03:19, 21 February 2011 (UTC)
Querying for Animation Values
Just as in CSS animations or CSS Transitions, “the computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property.”
For SVG Attributes which are of type “Animated” , for SMIL the current animated value can be returned by animVal while the original value or base value can be retrieved via baseVal.
For types animated with CSS, the majority of web developers will likely use computed values in CSS to obtain SVG animated values. Thus animVal would not be affected by CSS Animations and Transitions.