Animating with CSS Keyframes - Beginning CSS3 - page 467

In the example in the preceding section, animation-timing-function has been set to ease-out in both
keyframes in the @keyframes rule. The styles could be rewritten like this without changing the meaning:
@keyframes highlight {
from {
background-color: rgba(255,204,0,0);
}
50% {
background-color: rgba(255,204,0,.3);
}
to {
background-color: rgba(255,204,0,0);
}
}
article:target {
animation-name: highlight;
animation-duration: 4s;
animation-timing-function: ease-out;
}
In this case, there's not a great deal of difference in the amount of code needed. But you might have a more
complex animation with ten keyframes where you want a linear transition for each section apart from the first
and last. In such a case, you need to set animation-timing-function in the @keyframes rule only for the first and
penultimate keyframes. All other keyframes can be controlled by setting animation-timing-function to linear
in the element's style rule.
Setting the Number of Times an Animation Runs
By default, an animation runs only once, but you can change this by setting animation-iteration-count , which
accepts a number or the keyword infinite as its value. As you would expect, setting the value to infinite
repeats the animation endlessly. Negative values are invalid.
Interestingly, the number for animation-iteration-count doesn't need to be an integer. The animation
ends part-way through the cycle if you use a noninteger. There's an example of this in partial.html, which uses the
following keyframes and animation properties to slide a box back and forth across the screen:
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(500px);
}
}
#partial {
width: 50px;
height: 50px;
margin: 10px;
background-color: #036;
animation-name: slide;
animation-duration: 2s;
animation-timing-function: linear;