Animating with CSS Keyframes - Beginning CSS3 - page 461

The W3C announced in June 2012 that browsers no longer need to use browser-specific prefixes for
animation properties. The first versions to support unprefixed properties are IE 10, Firefox 16, and Opera 12.5.
At the time of this writing, no announcement has been made about WebKit-based browsers.

■ The source files for this chapter contain both the browser-specific syntax and the standard syntax in
separate style rules.

Note

Defining Keyframes
Creating a CSS animation is a two-stage process. Unlike CSS transitions, where all the properties are defined in
the element's style rules, you create the keyframes separately. This has the advantage that you can define a set of
keyframes and apply the same animation to different elements.
The keyframes describe the state of properties at each stage of the animation. Optionally, they also specify
the timing function (similar to transition-timing-function ) that controls the pace of the transition between
each stage.
You define a set of keyframes using @keyframes followed by the name you want to give the animation. All
the rules for the keyframes go inside a pair of curly braces. For example, to define the keyframes for an animation
called highlight :

@keyframes highlight {
/* Keyframe definitions */
}

■ The browser-specific prefix for older browsers goes after the @ mark. for example, older webKit-based
browsers use @-webkit-keyframes .

Note

Inside the curly braces, style blocks define the state of the animated properties at each stage. Each style
block has a keyframe selector indicating the percentage along the duration of the animation that the keyframe
represents. The selector for the starting keyframe can be either 0% or the keyword from . The selector for the
ending keyframe can be either 100% or to . All other selectors must be percentages.

■ if you use a percentage value for the starting point, it must be 0% . Omitting the percentage sign after 0
is invalid as a keyframe selector.

Caution

For example, the following @keyframes rule creates an animation that changes the background-color
property from fully transparent yellow at the start, increases it to 50% transparency at the halfway point, and fades
it back to fully transparent at the end:

@keyframes highlight {
from {
background-color: rgba(255,204,0,0);
}