CSS WG Blog New Working Drafts of CSS Transitions and …

New Working Drafts of CSS Transitions and CSS Animations

The CSS Working Group has published updated Working Drafts of CSS Transitions and CSS Animations.

CSS Transitions allows specifying that certain CSS property changes that would happen anyway will animate over time rather than taking place instantly. CSS Animations allows authors to animate the values of CSS properties over time, using keyframes. (CSS Animations allows authors to cause changes, in contrast to CSS Transitions, which only allows animating changes that are otherwise happening.)

These drafts update the copies on the Technical Reports (TR) page with the various changes made to the Editor’s Drafts of these specifications over the past few years.  These specifications are becoming more stable and we hope to advance them to Last Call relatively soon.  Transitions in particular has only a small number of remaining open issues (though some of those issues are complex).

As always, please send feedback to www-style with the spec shortname ([css3-transitions] or [css3-animations]) and your comment topic in the subject line.

Changes since the previous drafts

The changes since the previous drafts of these specification include the following changes. For the full list of changes see the version control log for transitions or for animations.

Changes to both specifications

• new steps(), step-start, and step-end timing functions
• cubic-bezier() timing function allows Y values outside of [0, 1]

Changes to CSS Transitions

• clearer description of how future specifications will change how properties animate
• In ‘transition-property’, ‘all’ is allowed within a list rather than only on its own.
• Repeating behavior for transition-* properties have different lengths is defined; transition-property defines the number of transitions and the other properties are repeated or truncated as needed.
• It is defined when (based on transition-property, transition-duration, and transition-delay) transitions (and thus transition events) occur.
• Changes to the interpolation rules for font weight, visibility, lists of properties.
• various changes to the list of animatable properties (removing shorthand, nonstandard, or future properties; changing clip, vertical-align, font-weight)
• TransitionEvent objects expose the pseudo element on which the transition occurred.

Changes to CSS Animations

• clearer description of the keyframes animation model
• describe how missing properties are handled in keyframes
• add ‘animation-fill-mode’ property
• add ‘reverse’ and ‘alternate-reverse’ values to ‘animation-direction’
• define how ‘animation-duration’ and ‘animation-delay’ are distinguished in the ‘animation’ shorthand
• define when the animationstart event fires
• define which animation wins when multiple animations try to animate the same property
• define that ‘animation-name’ determines the length of lists for animations, and other properties are repeated as needed
• changed insertRule method to appendRule method on CSSKeyframesRule
• describe that animations with 0 duration still fire events and honor fill mode and delay
• negative values of ‘animation-iteration-count’ are parse errors rather than being treated as 0
• make animation events non-cancelable

« Previous article Next article »