- 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 UTC