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

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

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.