W3C home > Mailing lists > Public > www-style@w3.org > November 2007

Apple's Proposal for CSS Animation

From: David Hyatt <hyatt@apple.com>
Date: Wed, 07 Nov 2007 11:34:15 -0600
To: www-style@w3.org
Message-id: <55306138-F5FA-43F4-8479-674C78FF5CCF@apple.com>

CSS Animation

6 November 2007

Authors:
Dave Hyatt (hyatt@apple.com), Apple
Dean Jackson (dean.jackson@apple.com), Apple
Chris Marrin (cmarrin@apple.com), Apple
1 Introduction

This document introduces new CSS features to enable animation.

Animation is currently possible in languages like SVG, but no system  
exists for the native animation of CSS styles. This proposal defines  
two types of animation. The first is implicit transitions, which  
describe how CSS properties can be made to change smoothly from one  
value to another. The second is defined animations, which specify the  
values that CSS properties will take over a given time interval.

2 Transitions

Normally when the value of a CSS property changes, the rendered  
result is instantly updated, with the affected elements immediately  
changing from the old property value to the new property value. This  
section describes a way to specify transitions using new CSS  
properties. These properties are then used to animate smoothly from  
the old state to the new state over time.

For example, suppose that transitions of one second have been defined  
on the 'left' and 'background-color' properties. The following  
diagram illustrates the effect of updating those properties on an  
element, in this case moving it to the right and changing the  
background from red to blue. This assumes other transition parameters  
still have their default values.


Transitions of 'left' and 'background-color'

Transitions are a presentational effect. 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.

Only animatable CSS properties can be transitioned.

Every CSS property definition should specify the following additional  
information: whether or not its value is animatable and how it should  
animate. Animatable properties are all of those which allow values of  
the type <integer>, <number>, <length>, <percentage>, <color>,  
<time>, <angle> or <transform-list>. See Coordinate System  
Transformations for more information about how transforms animate.
Some properties that take keyword values are interesting in the  
context of animation as well. For example, visibility. Visibility  
could be supported by saying that hidden/collapse = 0 and visible >  
0. This matches nicely with typical timing functions and animations  
and would cause an object to show when an animation started and hide  
when one ended (if going from 1 to 0 or 0 to 1).
The transition for a property is defined using a number of new  
properties. For example:

div {
   transition-property: opacity;
   transition-duration: 2s;
}
The above example defines a transition on the 'opacity' property  
that, when a new value is assigned to it, will cause a smooth change  
between the old value and the new value over a period of two seconds.
Each of the transition properties accepts a comma-separated list,  
allowing multiple transitions to be defined, each acting on a  
different property. In this case, the individual transitions take  
their parameters from the same index in all the lists. For example:

div {
   transition-property: opacity, left;
   transition-duration: 2s, 4s;
}

This will cause the 'opacity' property to transition over a period of  
two seconds and the left property to transition over a period of four  
seconds.
2.1 The 'transition-property' Property

The 'transition-property' property specifies the name of the CSS  
property to which the transition is applied.

We may ultimately want to support a keypath syntax for this property.  
A keypath syntax would enable different transitions to be specified  
for components of a property. For example the blur of a shadow could  
have a different transition than the color of a shadow.
Name:	transition-property
Value:	none | all | <transition-property> [, <transition-property>]*
Initial:	all
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
Is "none" even a useful value if the initial value is "all"? The  
syntax is more elegant if transition-duration defaults to 0 and this  
property defaults to "all", but another option is to default this  
property to "none" and duration to something reasonable, e.g., 250ms.  
This would force an author to specify transition-property in the  
shorthand all the time though.
2.2 The 'transition-duration' Property

The 'transition-duration' property defines the length of time that a  
transition takes.

Name:	transition-duration
Value:	<time> [, <time>]*
Initial:	0
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
This property specifies how long the transition from the old value to  
the new value should take. By default the value is 0, meaning that  
the transition is immediate.

2.3 The 'transition-timing-function' Property

The 'transition-timing-function' property describes how the  
intermediate values used during a transition will be calculated. It  
allows for a transition to change speed over its duration. These  
effects are commonly called easing functions. In either case, a  
mathematical function that provides a smooth curve is used.

The timing function is specified using a cubic bezier curve, which is  
defined by four control points, P0 through P3 (see Figure 1). P0 and  
P3 are always set to (0,0) and (1,1). The 'transition-timing- 
function' property is used to specify the values for points P1 and  
P2. These can be set to preset values using the keywords listed  
below, or can be set to specific values using the 'cubic-bezier'  
function. In the 'cubic-bezier' function, P1 and P2 are each  
specified by both an X and Y value.


Timing Function Control Points

The timing function takes as its input the current elapsed percentage  
of the transition duration and outputs a percentage that determines  
how close the transition is to its goal state.

Name:	transition-timing-function
Value:	default | linear | ease-in | ease-out | ease-in-out | cubic- 
bezier(<number>, <number>, <number>, <number>) [, default | linear |  
ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,  
<number>, <number>)]*
Initial:	default
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
The timing functions have the following definitions.

default
The default function is equivalent to cubic-bezier(0.25, 0.1, 0.25,  
1.0).
linear
The linear function is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0).
ease-in
The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out
The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out
The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58,  
1.0)
cubic-bezier
Specifies a cubic-bezier curve. The four values specify points P1 and  
P2 of the curve as (x1, y1, x2, y2).
2.4 The 'transition-name' Property

Name:	transition-name
Value:	none | <string> [, none | <string>]*
Initial:	none
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
The 'transition-name' property allows the author to provide a name  
for the transition that is used to match keyframe rules. See the next  
section, Keyframes, for more information.

2.5 The 'transition' Shorthand Property

The 'transition' shorthand property combines the four properties  
described above into a single property.

Name:	transition
Value:	[<transition-property> || <transition-duration> || <transition- 
timing-function> || <transition-name> [, [<transition-property> ||  
<transition-duration> || <transition-timing-function> || <transition- 
name>]]*
Initial:	see individual properties
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
What should happen when a value is changed midway through a  
transition? One option is to simply begin a new transition from the  
current position. However things get interesting when from/to values  
are being flipped. For example you'd like symmetry on fade-in/fade- 
out hover effects if the user rolls over the object and rolls out  
before the animation finishes. This implies that there needs to be a  
convenient and straightforward rule for running transitions in  
reverse under certain circumstances. This could be controlled via a  
new property, or could perhaps be done simply by detecting when the  
from/to values are flipped.
3 Keyframes

In a simple transition a single timing function and duration  
determine the intermediate values of the animating property. For  
finer control, keyframes can be used.

Keyframes are specified using a specialized at-rule. A @keyframes  
rule consists of the keyword "@keyframes", followed by the name of  
target transition (using a 'transition-name') or animation (using  
'animation-name'), followed by a set of style rules (delimited by  
curly braces).

The keyframe selector for a keyframe style rule consists of a comma- 
separated list of percentage values or the keywords 'from' or 'to'.  
The selector is used to specify the percentage along the duration of  
the animation or transition that the keyframe represents (the block  
of property values declared). The keyword 'from' is equivalent to the  
value 0. The keyword 'to' is equivalent to the value 100%.

The keyframe declaration for a keyframe rule consists of properties  
and values. Properties that are not transitioning or animating are  
ignored in these rules, with the exception of 'transition-timing- 
function' and animation-timing-function'.

The @keyframes rule that is used by a transition or animation will be  
the last one encountered in sorted rules order that matches the name  
of the transition. @keyframes rules do not cascade; therefore a  
transition or animation will never derive keyframes from more than  
one @keyframes rule.

To determine the set of keyframes, all of the values in selectors are  
sorted in increasing order by time. If there are any duplicates, then  
the last keyframe specified inside the @keyframes rule will be used  
to provide the keyframe information for that time. There is no  
cascading within a @keyframes rule if multiple keyframes specify the  
same keyframe selector values.

@keyframes 'wobble' {

   0 {
     left: 100px;
   }

   40% {
     left: 150px;
   }

   60% {
     left: 75px;
   }

   100% {
     left: 100px;
   }

}

Four keyframes are specified for the transition or animation named  
"wobble". In the first keyframe, shown at the beginning of the  
animation cycle, the 'left' value of the animation is 100px. By 40%  
of the animation duration, 'left' value has animated to 150px. At 60%  
of the animation duration, the 'left' value has animated back to  
75px. At the end of the animation cycle, the 'left' value has  
returned to 100px. The diagram below shows the state of the animation  
if it were given a duration of 10s.

Animations states specified by keyframes

3.1 Timing functions for keyframes

A keyframe style rule may also declare the timing function that is to  
be used as the transition or animation moves to the next keyframe.

@keyframes 'bounce' {

   from {
     top: 100px;
     animation-timing-function: ease-out;
   }

   25% {
     top: 50px;
     animation-timing-function: ease-in;
   }

   50% {
     top: 100px;
     animation-timing-function: ease-out;
   }

   75% {
     top: 75px;
     animation-timing-function: ease-in;
   }

   to {
     top: 100px;
   }

}

Five keyframes are specified for the transition or animation named  
"bounce". Between the first and second keyframe (ie. between 0 and  
25%) an "ease-out" timing function is used. Between the second and  
third keyframe (ie. between 25% and 50%) an "ease-in" timing function  
is used. And so on. The effect will appear as an element that moves  
up the page 50px, slowing down as it reaches its highest point then  
speeding up as it falls back to 100px. The second half of the  
animation behaves in a similar manner, but only moves the element  
25px units up the page.
See the 'transition-timing-function' property and the 'animation- 
timing-function' property for more information.

4 Animations

Animations are similar to transitions in that they change the  
presentational value of CSS properties over time. The principal  
difference is that while transitions trigger implicitly when property  
values change, animations are explicitly executed when the animation  
properties are applied. Because of this, animations require explicit  
values for the properties being animated. These values are specified  
using animation keyframes, described above.

Many aspects of the animation can be controlled, including how many  
times the animation iterates, whether or not it alternates between  
the begin and end values, and whether or not the animation should be  
running or paused. An animation can also delay its start time.

div {
   animation-name: 'diagonal-slide';
   animation-duration: 5s;
   animation-iteration-count: 10;
}

@keyframes 'diagonal-slide' {

   from {
     left: 0;
     top: 0;
   }

   to {
     left: 100px;
     top: 100px;
   }

}

This will produce an animation that moves an element from (0, 0) to  
(100px, 100px) over five seconds and repeats itself nine times (for a  
total of ten iterations).
4.1 The 'animation-name' Property

The 'animation-name' property defines a name for the animation. The  
name is used to select the keyframe at-rule that provides the  
property values for the animation. If the name does not match any  
keyframe at-rule, there are no properties to be animated and the  
animation will not execute.

Name:	animation-name
Value:	<string> [, <string>]*
Initial:	""
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
4.2 The 'animation-duration' Property

The 'animation-duration' property defines the length of time that an  
animation takes to complete one cycle.

Name:	animation-duration
Value:	<time> [, <time>]*
Initial:	0
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
4.3 The 'animation-timing-function' Property

The 'animation-timing-function' property describes how the animation  
will progress over one cycle of its duration. See the 'transition- 
timing-function' property for a complete description.

Name:	animation-timing-function
Value:	default | linear | ease-in | ease-out | ease-in-out | cubic- 
bezier(<number>, <number>, <number>, <number>) [, default | linear |  
ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>,  
<number>, <number>)]*
Initial:	default
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
4.4 The 'animation-iteration-count' Property

The 'animation-iteration-count' property defines the number of times  
an animation cycle is played. The default value is one, meaning the  
animation will play from beginning to end once. A value of 'infinite'  
will cause the animation to repeat forever. Non-integer numbers will  
cause the animation to end part-way through a cycle. Negative values  
for 'animation-iteration-count' are treated as zero. This property is  
often used with an 'animation-direction' value of 'alternate', which  
will cause the animation to play in reverse on alternate cycles.

Name:	animation-iteration-count
Value:	infinite | <number> [, infinite | <number>]*
Initial:	1
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
4.5 The 'animation-direction' Property

The 'animation-direction' property defines whether or not the  
animation should play in reverse on alternate cycles. If 'alternate'  
is specified, the animation cycle iterations that are odd counts are  
played in the normal direction, and the animation cycle iterations  
that are even counts are played in a reverse direction. When an  
animation is played in reverse the timing functions are also  
reversed. For example, when played in reverse an ease-in animation  
would appear to be an ease-out animation.

Name:	animation-direction
Value:	normal | alternate [, normal | alternate]*
Initial:	normal
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
4.6 The 'animation-play-state' Property

The 'animation-play-state' property defines whether the animation is  
running or paused. A running animation can be paused by setting this  
property to 'paused'. To continue running a paused animation this  
property can be set to 'running'. A paused animation will continue to  
display the current value of the animation in a static state, as if  
the time of the animation is constant. When a paused animation is  
resumed, it restarts from the current value, not necessarily from the  
beginning of the animation.

Name:	animation-play-state
Value:	running | paused [, running | paused]*
Initial:	running
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
4.7 The 'animation-delay' Property

The 'animation-delay' property defines when the animation will start.  
It allows an animation to begin execution at some period of time  
after it is applied. An 'animation-delay' value of 'now' means the  
animation will execute as soon as it is applied. Otherwise, the value  
specifies an offset from the moment the animation is applied, and the  
animation will delay execution by that offset.

If the value for 'animation-delay' is a negative time offset then the  
animation will execute the moment it is applied, but will appear to  
have begun execution at the specified offset. That is, the animation  
will appear to begin part-way through its play cycle. In the case  
where an animation has implied starting values and a negative  
'animation-delay', the starting values are taken from the moment the  
animation is applied.

Name:	animation-delay
Value:	now | <time> [, now | <time>]*
Initial:	now
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
4.8 The 'animation' Shorthand Property

The 'animation' shorthand property combines the five animation  
properties into a single property.

Name:	animation
Value:	[<animation-name> || <animation-iteration-count> || <animation- 
direction> || <animation-play-state> || <animation-delay>] [,  
[<animation-name> || <animation-iteration-count> || <animation- 
direction> || <animation-play-state> || <animation-delay>]]*
Initial:	see individual properties
Applies to:	block-level and inline-level elements
Inherited:	no
Percentages:	N/A
Media:	visual
Computed value:	Same as specified value.
Received on Wednesday, 7 November 2007 17:34:39 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:56 GMT