The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

176 Chapter 14

Keyframes

Transition Transition

Animation

Figure 14-6: An animation with three keyframes and transitions between each

noTe Remember you’ll also have to duplicate your keyframe ruleset to accommodate WebKit-

based browsers. Use the WebKit prefix: @-webkit-keyframes.

The first value for the @keyframes rule is name; this unique identifier is

used to call the animation, which I’ll discuss later. You can use pretty much

any value here (use hyphen separation, not spaces, if you want a name with

multiple words), although I suggest using a word or term that is relevant to

the animation it describes—your stylesheets will be much easier to follow if

you do.

The next value, selector, sets the position along the duration of the ani-

mation that the keyframe will occur. The usual value here is a percentage

value; for example, if you want the keyframe to occur halfway through your

animation, use 50%. You can also use one of the keywords, from or to, which

are analogous to 0 percent and 100 percent, respectively.

Within each keyframe selector is a CSS declaration or series of declara-

tions that are applied to a selected element at the specified stage of the ani-

mation. If this is all blowing your mind, let me clarify with an example. The

following code describes a simple animation, which I’ve named expand, with

three keyframes:

@keyframes expand {

 from { border-width: 4px; }

 50% { border-width: 12px; }

 to {

x border-width: 4px;

height: 100%;

width: 100%;

}

}

At the beginning of the animation (), the selected element has a

border that is 4px wide; halfway through the animation (), the border is

increased to a width of 12px; and at the end of the animation(), the bor-

der is back to 4px wide, and the height and width are both 100%. Between

each of the keyframes, the elements are animated gradually, so between the

start and halfway through the animation, the border is animated to change

width smoothly from 4px to 12px.

Note that inheritance operates on individual keyframes, so if you want

a change to persist between frames, you need to specify it in each frame. If