Pro CSS3 Animation

Chapter 5 ■ CSS3 Keyframe animationS

You may wish to place very long sequences at the bottom of the stylesheet (to get them out of the way) or even
keep them as a separate .css file (brought into your page via @import or < link >), although this adds a separate
HTTP request.
You call the CSS keyframe animation sequence by applying separate CSS properties to an element, shown in
Listing 5-4.

Listing 5-4. Calling a CSS Keyframe Animation Sequence

#redbox {
background-color: red;
width: 100px; height: 150px;
animation-name: slide;
animation-duration: 5s;
animation-timing-function: ease-in;
}

As you can see, these properties (with the exception of animation-name), are very much like those for
transitions introduced in Chapter 3, and they have much the same function. One difference is that
animation-duration can be set to the infinite keyword, rather than time in seconds or milliseconds.
The Animation module also has the animation-delay property, and adds animation-iteration-count,
animation-direction, animation-play-state and animation-fill-mode.
The animation can also be called in a single animation shortcut property, as shown in Listing 5-5.

Listing 5-5. Calling a CSS Keyframe Animation Sequence with a Shortcut

#redbox { animation: slide 5s ease-in 2s; }

The animation values may be declared in any order, with the exception of the duration and delay values,
which must be stated with duration first and delay following.

Support for Keyframe Animation in Older Browsers

Older browsers require vendor prefixes, as already discussed for transitions. This is complicated by the fact that
the @keyframes declaration also needs prefixing, as shown in Listing 5-6.

Listing 5-6. Calling a CSS Keyframe Animation Sequence for Older Webkit Browsers

@-webkit-keyframes multislide {
0% { left: 20px; }
20% { right: 200px; }
80% { left: 50 %; }
100% { right: 180px; }
}

#bluebox {
width: 100px; height: 150px;
-webkit-animation-name: multislide;
-webkit-animation-duration: 10.5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 200ms;
}