Specifying the Timing Function Between Keyframes

Optionally, @keyframes rules can specify how the browser should calculate intermediate values between each keyframe using the animation-timing-function property. This accepts the same values as transition-timing-function, namely:

• ease Starts slow, speeds up, and slows toward the end.
• linear Transitions at an even pace throughout.
• ease-in Starts slow and speeds up.
• ease-out Starts fast and slows toward the end.
• ease-in-out Similar to ease, but slower at each end.
• cubic-bezier() Specifies a custom transition using a cubic-bézier curve.
• step-start The change takes place at the beginning of the duration.
• step-end The change takes place at the end of the duration.
• steps() The change takes place in the specified number of equal steps.

Adding animation-timing-function to a keyframe tells the browser how to handle the pace of the transition to the next keyframe. For example, the highlight example in the preceding section has been amended to use ease-out for both halves of the animation like this:

@keyframes highlight {
    from {
        background-color: rgba(255,204,0,0);
        animation-timing-function: ease-out;
    }
    50% {
        background-color: rgba(255,204,0,.5);
        animation-timing-function: ease-out;
    }
    to {
        background-color: rgba(255,204,0,0);
    }
}

You can set animation-timing-function on each keyframe except the last one (100% or to). If you set a timing function on the ending keyframe, it’s ignored.

If you don’t specify animation-timing-function for a keyframe, the default ease is used. However, you can specify a different default as described in “Setting the Timing Function Between Keyframes” later in this chapter.

Specifying Which Animation to Use

The animation-name property takes as its value one or more names of @keyframes rules. For example, to apply the highlight keyframes to an element, just set the value of animation-name like this in the element’s style rule:

animation-name: highlight;

To apply multiple animations, list the names of the @keyframes rules separated by commas:

animation-name: animation1, animation2, animation3;

Setting the Duration of an Animation

The animation-duration property takes as its value one or more times specified as seconds (s) or thousandths of a second (ms). If multiple times are specified, they’re applied to the animations in the same order as listed for animation-name.

The styles for faq.html in the ch21 folder are in styles/faq.css. They define a set of keyframes called highlight and then apply the animation to the :target pseudo-element of <article> elements like this:

@keyframes highlight {
    from {
        background-color: rgba(255,204,0,0);
        animation-timing-function: ease-out;
    }
    50% {
        background-color: rgba(255,204,0,.3);
        animation-timing-function: ease-out;
    }
    to {
        background-color: rgba(255,204,0,0);
    }
}
article:target {
    animation-name: highlight;
    animation-duration: 4s;
}

This draws attention to an <article> element that has been accessed through a link with a URL fragment by fading up a pale yellow background behind it, and then fading out the background. The animation lasts four seconds, with the yellow background at its most intense at the halfway mark (see Figure 21-1).

Setting the Timing Function Between Keyframes

The animation-timing-function controls the pace at which the browser calculates intermediate property values. Although you can apply the same value to the whole animation, it affects the transition between individual keyframes, not the animation from start to finish.

There are two ways to set the timing function. You can set it for individual keyframes in the @keyframes rule as shown earlier in this chapter. Alternatively, you can set it in the style rule that applies the animation to the element. Timing functions are applied in the following order:

1. Values in @keyframes rules always take precedence.
2. If a timing function hasn’t been set for an individual keyframe in the @keyframes rule, the value in the element’s style rule is used.
3. If a timing function hasn’t been set in either place, the default ease is used.

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;
    animation-iteration-count: 1.5;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

The animation properties apply the slide keyframes to the box, set the duration to two seconds, and the timing function to linear. As a result, the box takes two seconds to travel 500px across the screen at a steady pace. The value of animation-iteration-count is set to 1.5, so the animation continues running after the first iteration. The next two properties, animation-direction and animation-fill-mode, are described in detail later, but they have the effect of sending the box back in the opposite direction and fixing it in position when the animation ends. Because the number of iterations is 1.5, the box comes to a halt in the middle of its journey back to its original position (see Figure 21-2).

Specifying Whether the Animation Should Run in Reverse

The animation-direction property controls whether the animation runs in reverse on some or all cycles. This takes as its value one of the following keywords:

• normal The is the default. All iterations of the animation run in the order defined by the @keyframes rule.
• reverse All iterations run in the reverse order from that defined in the @keyframes rule.
• alternate Counting from 1, all odd cycles run in the normal direction, and all even ones in reverse.
• alternate-reverse Counting from 1, all odd cycles run in reverse, and all even ones run in the normal direction.

To see how they work, load animation-direction.html into a browser, and click the play button alongside each value to toggle the animation on and off (see Figure 21-3).

The four squares all share the following animation properties:

animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;

The animation is set to repeat endlessly, but the squares don’t move until you click a button because animation-name hasn’t been set. Clicking the play button alongside a square triggers a JavaScript function that applies the animated class to the square and sets its animation-name to slide. Clicking the button again, removes the class and the animation, causing the box to jump back to its original position.

The slide keyframes are the same as in the preceding example. They simply move the element 500px across the screen. This is how animation-direction affects the repeat pattern:

• normal The square starts on the left, and moves 500px to the right. When it reaches its destination, it jumps back to its original position, and starts moving right again.
• reverse The square jumps 500px to the right, and starts moving left. When it reaches its original position, it jumps back to the right, and starts moving left.
• alternate The square starts on the left, and moves 500px to the right. When it reaches its destination, it starts moving back in the opposite direction, and keeps moving back and forth across the screen.
• alternate-reverse The square jumps 500px to the right, and starts moving to the left. When it reaches its original position, it starts moving to the right, and keeps moving back and forth.

So, normal and reverse always repeat the keyframes in a single direction, but starting at different ends of the animation. The other values for animation-direction repeat the animation in both directions. The difference between alternate and alternate-reverse lies in where they begin the sequence. After that, they both go back and forth.

Pausing an Animation

The example in the preceding section controlled whether the animation was running by assigning the animation-name property to a class and toggling the class on and off. As a result, a square was no longer animated when the class was removed from it, and it jumped back to its original position. However, you can use the animation-play-state property to pause an animation, freezing the element in its current state. The property accepts the following values:

• running This is the default state. The animation runs normally. If the animation has been paused, it resumes from the current point of the cycle.
• paused The animation stops running. The element(s) continue to display in the state they were in when the animation was paused.

You need some sort of trigger to pause an animation. The simplest trigger is the :hover pseudo-class. For example, pause_hover.html contains the following animation:

@keyframes pulsate {
    from {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}
#box {
    /* Other styles omitted */
    animation-name: pulsate;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
#box:hover {
    animation-play-state: paused;
}

The animation causes a 50px square to pulsate by altering its scale every quarter-second. Hovering over the square brings some blessed relief by setting animation-play-state to paused. But as soon as you move the mouse pointer away, the animation resumes.

To preserve everyone’s sanity, a better solution is to create a class that sets animation-play-state to paused, and then use JavaScript to toggle the class on and off. In pause.html, two (extremely) annoying animations are assigned the class animated. The styles also contain the following class:

.paused {
    animation-play-state: paused;
}

The following JavaScript at the foot of the page identifies all elements with the animated class and binds to them an event handler that toggles the paused class on and off whenever an animated element is clicked:

function toggleAnimations(animated, paused) {
    // Exit silently if old browser
    if (!document.getElementsByClassName) return;
    // Set default class names if no arguments passed to function
    if (!paused) var paused = 'paused';
    if (!animated) var animated = 'animated';
    var animations = document.getElementsByClassName(animated);
    // Exit silently if classList not supported
    if (!animations[0].classList) return;
    for (var i = 0; i < animations.length; i++) {
        animations[i].addEventListener('click', (function(num) {
            return function(e) {
                this.classList.toggle(paused);
            }
        })(i), false);
    }
}
toggleAnimations();

This defines a JavaScript function called toggleAnimations() and immediately executes it. The function optionally takes two arguments for the names of the animation and pause classes. If no arguments are passed to the function, it assigns animated and paused as the default class names.

The animations in pause.html create a constantly expanding and shrinking orange glow behind a heading and a multicolored box that twirls as it follows a V-shaped path back and forth across the screen (see Figure 21-4). Clicking the heading brings instant relief, but it can be a challenge to catch the multicolored box and bring it to a halt. Clicking them again starts the madness all over.

Delaying an Animation

The animation-delay property works exactly the same way as transition-delay, which was described in the previous chapter. It delays the start of an animation by the amount specified in seconds (s) or milliseconds (ms).

If you specify a negative value, the animation starts immediately, but at the point it would have reached at the specified offset. So, if the animation is four seconds long, and animation-delay is set to minus two seconds, it begins halfway through.

Controlling Properties Before and After Animation

The animation-fill-mode property controls the state of an element before and after an animation. For example, if an element changes color during the animation, you can choose whether to preserve that color or return to the original one when the animation finishes. It accepts the following values:

• none This is the default. Properties return to their original state when the animation ends.
• forwards Properties retain values set by the final keyframe.
• backwards If the animation is delayed by animation-delay, properties assume values set by the first keyframe while waiting for the animation to start.
• both Values set by the first and last keyframes are applied before and after the animation.

To demonstrate how this affects animated elements, animation-fill-mode.html contains four squares alongside play buttons. When you click a play button, it applies the animated class to the square next to it, and sets the square’s animation-name to slideback. The slideback keyframes cause the square to jump 500px to the right and then slide back to its original position like this:

@keyframes slideback {
    from {
        transform: translateX(500px);
    }
    to {
        transform: translateX(0);
    }
}

Each square has a different value for animation-fill-mode, as indicated by the label next to the play button. However, they all share the following animation properties:

animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: 2;
animation-direction: alternate;
animation-delay: 2s;

To show how animation-fill-mode affects the animation, there’s a two-second delay at the start. The animation runs for two iterations, and animation-direction is set to alternate. When the square reaches the left side of the screen, it starts moving back in the opposite direction. The animation comes to an end when it reaches the right side of the screen. This is how each square is animated when you click its play button (see Figure 21-5):

• none After the two-second delay, the square jumps to the right, slides back to the left, and then slides to the right. At the end of the animation, it jumps back to its original position.
• forwards The square behaves the same way as none, but it remains on the right when the animation is over.
• backwards The square immediately jumps to the right of the screen, pauses for two seconds, then moves back and forth across the screen. At the end of the animation, it jumps back to its original position.
• both The square behaves the same way as backwards, but it remains on the right when the animation is over.

Using the animation Shorthand Property

The animation shorthand property lets you define one or more animations in a single declaration. It accepts values for all the individual properties except animation-play-state. Like the transition shorthand property, the first time value is interpreted as the duration, and the second (if present) is interpreted as the delay.

In animation_1.html, the <h1> heading is animated using the animated shorthand property like this:

animation: bounce 2s ease-out;

There’s only one time value, so it represents the duration. No values are set for the number of iterations or direction, so the animation runs only once in the normal direction. It drops the heading into position and bounces it twice before coming to a halt. The shorthand is the equivalent of the following individual rules:

animation-name: bounce;
animation-duration: 2s;
animation-timing-function: ease-out;

Applying Multiple Animations

In animation_2.html, a second animation is added to the heading by adding another definition to the shorthand property after a comma like this:

animation: bounce 2s ease-out,
           glow 2s 2s ease-out forwards;

The second animation called glow adds an animated text shadow. It has two time values, the first one is the duration and the second is the delay before the animation starts. There’s no number or direction, so the animation runs only once in the normal direction. But animation-fill-mode is specified as forwards, so the property values in the final keyframe are preserved (see Figure 21-6).

The shorthand is the equivalent of the following individual properties:

animation-name: bounce, glow;
animation-duration: 2s, 2 s;
animation-timing-function: ease-out;
animation-delay: 0s, 2s;
animation-fill-mode: none, forwards;

The values for each property are separated by commas and are applied to the animations in the same order as they’re listed in animation-name. When using the individual properties like this, you need to specify default values explicitly unless they’re shared by all animations. For example, the bounce animation runs immediately, but glow is delayed by two seconds. In the shorthand version, the delay isn’t specified for bounce. But when the individual properties are used, it needs to be set to 0s. Otherwise it would have the same delay as glow.