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

180 Chapter 14

Transition Transition

Iteration

Transition Transition

Iteration

Transition Transition

Iteration

Transition Transition

Iteration

animation-direction: normal

animation-direction: alternate

Figure 14-7: An animation played in the normal direction repeats itself from start

to finish; when played using alternate, each second cycle plays finish to start.

animation-fill-mode

If your animation is finite—that is, if it doesn’t have an infinite value for

the animation-iteration-count property—then you use the animation-fill-mode

property to set how the element appears outside of the animation cycle. To

show you what I mean by that, let’s consider the following style rules:

@keyframes example {

from { background-color: red; }

to { background-color: blue; }

}

E {

animation-delay: 1s;

animation-duration: 1s;

animation-iteration-count: 2;

animation-name: example;

background-color: green;

}

In this rule, element E will be green for the 1s delay before the anima-

tion is triggered, then instantly change to red, then transition to blue, iterat-

ing twice ( 2 ), and then at the end revert back to the initial green.

You can change this behavior with animation-fill-mode. The syntax looks

like this:

E { animation-fill-mode: keyword; }

The permitted keywords are none (the default), backwards, forwards,

or both. If you use backwards, the declarations specified in the 0% (or from)

keyframe will be applied to the element before the animation begins; if you

use forwards, the declarations in the 100% (or to) keyframe will be applied

when the animation ends; or if you use both, the 0% declarations will apply

before the animation and the 100%, a fter.