Comments on CSS Animations

Hi CSS WG.

As promised, here are some comments on CSS Animations.


The production for keyframes-rule in the grammar is:

  keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';

but the examples seem to use single quoted names instead of IDENTs for
the keyframes rule name.


CSS Animations defines how it applies animated values better than
Transitions does.  (I think this wording should go into Transitions,
since Animations says that it extends Transitions.)

As I mentioned earlier, SVG animations of CSS properties are applied by
modifying the override style sheet of the element, which then contribute
to the computed value of the element. These can be overridden with
!important rules.  CSS Animations bypass the normal computation rules
and just override the computed value of the property, and so would take
precedence over SVG animations and any !important rules.  Do you think
there might be advantages to integrating with the regular computed value
computations as SVG does (thinking out loud)?

I wonder also what the effect would be of the following:

  <svg xmlns="http://www.w3.org/2000/svg">
    <circle r="100" style="fill: blue; transition: fill 1s">
      <set attributeName="fill" to="red"/>
    </circle>
  </svg>

Since <set> will modify the <circle>’s override style sheet, that would
trigger the transition, I guess.  If the <set> were an <animate>,
there’d be many (useless) transitions per animation tick.

Also, how do CSS Transitions and Animations interact?


The term “intrinsic style” isn’t one that I’m familiar with from CSS.
Is it the computed value of the property as derived using the regular
CSS cascade/computation rules? If so, then the spec should say so.


  In the case of multiple animations specifying behavior for the same
  property, the animation defined last will override the previously
  defined animations.

This is different from SVG animation, where the most recently begun
animation is the one that takes precedence (or later in document order,
if two start at the same time; it’s moved to the top of the sandwich).
Are there good reasons to be different here?


  The start time of an animation is the latter of two moments: the time
  at which the style is resolved that specifies the animation, or the
  time the document’s load event is fired.

In SVG, the animation timeline can be defined to begin either at
document load or as soon as the document element has been parsed[1].  In
SVG documents where timelineBegin="onStart", t=0s in the document
timeline wouldn’t correspond to the first time when CSS animations can
apply.  Would it be worth referring to the document timeline here, so
that such animations are synchronised (but falling back to the time of
the document’s load event firing when a document timeline isn’t
defined)?


  Once an animation has started it continues until it ends or the
  ‘animation-name’ is removed.

s/‘animation-name’ is removed/actual value of the ‘animation-name’
property no longer references the keyframes rule/, or some such.


I suppose a keyframes rule with a name of “none”, “inherit” or “initial”
could never be referenced from ‘animation-name’.  Maybe the section
describing the keyframes rule should mention this or disallow those
names.


  The values used for the keyframes and animation properties are
  snapshotted at the time the animation starts. Changing them during the
  execution of the animation has no effect.

Presumably this doesn’t apply to ‘animation-play-state’.


What happens if ‘animation-name’ has the value “a, none, b”, say?  Are
animations a and b applied?


  A ‘animation-timing-function’ defined within a keyframe block applies
  to that keyframe, otherwise the timing function specified for the
  animation is used.

Does it apply to the interpolation from the previous keyframe to that
this keyframe, or from this keyframe to the next?  Also, what happens
when an ‘animation-timing-function’ in the keyframe rules specifies a
list of timing functions?


  We are considering removing ‘animation-play-state’ since its behaviour
  can be replicated using other techniques. For example, by querying the
  computed style, removing the animation and then setting style.

I think it would be easier for authors to set a property to pause the
animation, rather than the workaround suggested.  Of course,
‘animation-play-state’ has the same usability issues with all of the
Transitions and Animations properties in that if you want to pause a
single animation, you have to do some string tokenisation to extract out
the relevant “running” value to replace with “paused”.


The ‘animation’ shorthand is defined to be:

  [<animation-name> || <animation-duration> ||
   <animation-timing-function> || <animation-delay> ||
   <animation-iteration-count> || <animation-direction>]
  [, [<animation-name> || <animation-duration> ||
      <animation-timing-function> || <animation-delay> ||
      <animation-iteration-count> || <animation-direction>] ]*

What if the property were set to “a 1s 2s”?  Would the 1s be the
duration or the delay?  (Same goes for the ‘transition’ property.)
Similarly, if it were set to “ease-in” would that be the animation name
or the timing function?


  Therefore an event will be generated for each animation-name value and
  not necessarily for each property being animated. 

If ‘animation-name’ were “a a” would an animationstart event be fired
twice or once for the “a” animation?


As with transitionend, the animationstart, animationeend and
animationiteration events should define their default behaviour so that
their being cancelable makes sense.


The definition of elapsedTime says:

  For an “animationstart” event, the elapsedTime is always zero.

Does it make sense then to have elapsedTime omitted from the context
info of animationstart?


The CSSRule.KEYFRAMES_RULE constant value conflicts with SVG’s
COLOR_PROFILE_RULE constant value[2].  (Is there a registry for these
values, or a defined process for having values allocated?  Same question
for, say, DOMException codes.)


CSSKeyframeRule.keyText is defined as:

  This attribute represents the key as the string representation of a
  floating point number between 0 and 1. If the value in the CSS style
  is from this value will be 0, and if the value in the CSS style is to
  this value will be 1.

What if the keyframe selector was a list of values?  Is it a comma
separated list of floats between 0 and 1?


The ‘key’ parameter to CSSKeyframesRule.deleteRule is defined as:

  The key which describes the rule to be deleted. The key must resolve
  to a number between 0 and 1, or the rule is ignored.

Not sure what it means to “resolve” in this context.  If my keyframe
rule had a selector “20%,30%” and I pass in "30%,20%" will it remove the
rule?  What about “0.2,30%” or just “20%”?  Similarly for findRule().


Thanks,

Cameron

[1] http://www.w3.org/TR/SVGTiny12/struct.html#SVGElementTimelineBegin
[2] http://www.w3.org/TR/SVG/types.html#InterfaceSVGCSSRule

-- 
Cameron McCormack ≝ http://mcc.id.au/

Received on Saturday, 28 February 2009 01:40:24 UTC