The transition-property Property

The transition-property property specifies the names of the CSS properties you want to transition. And, yes, it’s weird to say “the transition-property property.”

The value for the transition-property is a comma-separated list of properties; the keyword none if you want no properties transitioned; or the default all, which means “transition all the transitionable properties.” You can also include the keyterm all within a comma-separated list of properties.

If you include all as the only keyterm—or default to all—all the transitionable properties will transition in unison.

Let’s say you want to change a box’s appearance on hover:

div {
    color: #ff0000;
    border: 1px solid #00ff00;
    border-radius: 0;
    transform: scale(1) rotate(0deg);
    opacity: 1;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
    width: 50px;
    padding: 100px;
}
div:hover {
    color: #000000;
    border: 5px dashed #000000;
    border-radius: 50%;
    transform: scale(2) rotate(-10deg);
    opacity: 0.5;
    box-shadow: -3px -3px rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 20px;
}

When the user hovers over the div, every property that has a different value in the default state versus the hovered state will change to the hover-state values. We use the transition-property property to define which of those properties we want to animate over time (versus instantly). All the properties will change from the default value to the hovered value on hover, but only the animatable properties included in the transition-property will transition over time. Nonanimatable properties like border-style will change from one value to the next instantly. See “Transitionable properties”.

div {
    color: #ff0000;
    border: 1px solid #00ff00;
    border-radius: 0;
    transform: scale(1) rotate(0deg);
    opacity: 1;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
    width: 50px;
    padding: 100px;
    transition-property: color, border, border-radius, transform, opacity,
        box-shadow, width, padding;
    transition-duration: 1s;
}

div {
    color: #ff0000;
    border: 1px solid #00ff00;
    border-radius: 0;
    transform: scale(1) rotate(0deg);
    opacity: 1;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
    width: 50px;
    padding: 100px;
    transition-property: all;
    transition-duration: 1s;
}

<div class="foo">Hello</div>

div {
    color: #ff0000;
    border: 1px solid #0f0;
    border-radius: 0;
    transform: scale(1) rotate(0deg);
    opacity: 1;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
    width: 50px;
    padding: 100px;
}

.foo {
    color: #00ff00;
    transition-property: color, border, border-radius, transform, opacity,
        box-shadow, width, padding;
    transition-duration: 1s;
}

div {
    color: #f00;
    border: 1px solid #00ff00;
    border-radius: 0;
    transform:
    scale(1) rotate(0deg);
    opacity: 1;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
    width: 50px;
    padding: 100px;
    transition-property: all, border-radius,
    opacity; transition-duration: 1s, 2s, 3s;
}

border-bottom-left-radius
border-bottom-right-radius
border-top-right-radius
border-top-left-radius

padding-top
padding-right
padding-bottom
padding-left

border-left-width
border-right-width
border-top-width
border-bottom-width
border-top-color
border-left-color
border-right-color
border-bottom-color

document.querySelector('div').addEventListener('transitionend',
    function (e) {
      console.log(e.propertyName);
});

The transition-duration Property

The transition-duration property takes as its value a comma-separated list of lengths of time, in seconds (s) or milliseconds (ms), it should take to transition from the original property values to the final property values.

The transition-duration property dictates how long it should take for each property to transition from the original value to the new value. If reverting between two states, and the duration is only declared in one of those states, the transition will take the amount of time declared to revert to the previous state:

input:invalid {
    transition-duration: 1s;
    background-color: red;
}

input:valid {
    transition-duration: 0.2s;
    background-color: green;
}

If different values for the transition-duration are declared, the duration of the transition will be the transition-duration value declared in the rule block it is transitioning to. In the preceding example, it will take 1 second for the input to change to a red background when it becomes invalid, and only 200 milliseconds to transition to a green background when it becomes valid.

The value of the transition-duration property should be declared as a positive value in either seconds (s) or milliseconds (ms). The time unit of ms or s is required by the specification, even if the duration is set to 0s. By default, properties simply change from one value to the next instantly. In line with this, the default value for the duration of a transition is 0s, meaning the transition is immediate, showing no animation.

Unless there is a positive value for transition-delay set on a property, if transition-duration is omitted, it is as if no transition-property declaration had been applied—with no transitionend event occuring. As long as the total time set for a transition to occur is greater than 0s—which can happen with a duration of 0s or when the transition-duration is omitted and defaults to 0s, if there is a positive transition-delay value—the transition will still be applied and a transitionend event will occur if the transition finishes.

Negative values for transition-duration are invalid, and, if included, will invalidate the entire property value.

Using the same super-long transition-property declaration, we can declare a single duration for all the properties or individual durations for each property, or we can make alternate properties animate for the same length of time. We can declare a single duration that applies to all properties during the transition by including a single transition-duration value:

 div {
    color: #ff0000;
    ...
    transition-property: color, border, border-radius, transform, opacity,
        box-shadow, width, padding;
    transition-duration: 200ms;
}

We could have instead declared the same number of comma-separated time values for the transition-duration property value as the CSS properties we enumerated in the transition-property property value. If we want each property to transition over a different length of time, we have to include a different comma-separated value for each property name declared:

div {
    color: #ff0000;
    ...
    transition-property: color, border, border-radius, transform, opacity,
        box-shadow, width, padding;
    transition-duration: 200ms, 180ms, 160ms, 140ms, 120ms, 100ms, 1s, 2s;
}

If the number of properties declared does not match the number of durations declared, the browser has specific rules on how to handle the mismatch. If there are more durations than properties, the extra durations are ignored. If there are more properties than durations, the durations are repeated. In this example, color, border-radius, opacity, and width have a duration of 100 ms; border, transform, box-shadow, and padding will be set to 200 ms:

div {
    ...
    transition-property: color, border, border-radius, transform, opacity,
        box-shadow, width, padding;
    transition-duration: 100ms, 200ms;
}

If we declare exactly two comma-separated durations, every odd property will transition over the first time declared, and every even property will transition over the second time value declared.

If a transition is too slow, the website will appear slow or unresponsive, drawing unwanted focus to what should be a subtle effect. If a transition is too fast, it may be too subtle to be noticed. While you can declare any positive length of time you want for your transitions, your goal is likely to provide an enhanced rather than annoying user experience. Effects should last long enough to be seen, but not so long as to be noticeable. Generally, the best effects range between 100 and 200 milliseconds, creating a visible, yet not distracting, transition.

We want a good user experience for our drop-down menu, so we set both properties to transition over 200 milliseconds:

nav li ul {
    transition-property: transform, opacity;
    transition-duration: 200ms;
    ...
}

The transition-timing-function Property

Do you want your transition to start off slow and get faster, start off fast and end slower, advance at an even keel, jump through various steps, or even bounce? The transition-timing-function provides a way to control the pace of the transition. The transition-timing-function property describes how the transition proceeds as it is being executed.

The transition-timing-function values include ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(n, start)—where n is the number of steps—steps(n, end), and cubic-bezier(x1, y1, x2, y2). These values are also the valid values for the animation-timing-function and are described in great detail in Chapter 3.

The non-step keyword are easing timing functions employing cubic Bézier mathematical functions to provide smooth curves. The specification provides for five predefined easing functions, but you can describe your own precise timing function by defining your own cubic-bezier() function, as shown in Table 2-1.

Cubic Bézier curves, including the underlying curves defining the five named easing functions defined in Table 2-1 and displayed in Figure 2-3, take four numeric parameters. For example, linear is the same as cubic-bezier(0, 0, 1, 1). The first and third cubic Bézier function parameter values need to be between 0 and +1.

Figure 2-3. Supported cubic Bézier named functions incude ease, linear, ease-in, ease-out, and ease-in-out

If you’ve taken six years of calculus, the method of writing a cubic Bézier function might make sense; otherwise, it’s likely you’ll want to stick to one of the five basic timing functions. There are online tools that let you play with different values, such as cubic-bezier.com, which lets you compare the common keywords against each other, or against your own cubic Bézier function.

The predefined key terms are fairly limited. To better follow the principles of animation (refer back to “12 Basic Principles of Animation”), you may want to use a cubic Bézier function with four float values instead of the predefined key words.

As shown in Figure 2-4, the website easings.net provides many additional cubic Bézier function values you can use to provide for a more realistic, delightful animation.

Figure 2-4. Useful author-defined cubic Bézier functions

While the authors of the site named their animations, the preceding names are not part of the CSS specifications, and must be written as follows:

There are also step timing functions available, with two predefined step values:

As Figure 2-5 shows, the stepping functions show the progression of the transition from the initial value to the final value in steps, rather than as a smooth curve.

Figure 2-5. Step timing functions

The step functions allow you to divide the transition over equidistant steps. The functions define the number and direction of steps. There are two direction options: start and end. With start, the first step happens at the animation start. With end, the last step happens at the animation end. For example, steps(5, end) would jump through the equidistant steps at 0%, 20%, 40%, 60%, and 80%; and steps(5, start) would jump through the equidistant steps at 20%, 40%, 60%, 80%, and 100%.

The step-start function is the same as steps(1, start). When you use it, the property value stays on the final value from the beginning until the end of the transition. The step-end function, which is the same as steps(1, end), sits on the initial value of the property, staying there through the transition’s duration.

Continuing on with the same super-long transition-property declaration, we can declare a single timing function for all the properties or individual timing functions for each property, or we can make every even property have one timing function, while every odd property proceeds at a separate pace:

div {
    ...
    transition-property: color, border-width, border-color, border-radius,
        transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
}

In the preceding example, we made all the properties transition at the same tempo by including a single time as the timing-function value:

div {
    ...
    transition-property: color, border-width, border-color, border-radius,
        transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms, 180ms, 160ms, 140ms, 120ms, 100ms, 1s, 2s, 3s;
    transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear,
        step-end, step-start, steps(5, start), steps(3, end);
}

We can also create a horrible user experience by making every property transition at a different rhythm. The transition-timing-function does not change the time it takes to transition properties: that is set with the transition-duration property; but it does change how the transition progresses during that set time:

div {
    ...
    transition-property: color, border-width, border-color, border-radius,
        transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms;
    transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear,
        step-end, step-start, steps(5, start), steps(3, end);
}

If we include these nine different timing functions for the nine different properties, as long as they have the same transition duration and delay, all the properties start and finish transitioning at the same time. The timing function controls how the transition progresses, but does not alter the time it takes for the transition to finish.

These timing functions are described in great detail in “animation-timing-function”. The best way to familiarize yourself with the timing functions is to play with them and see which one works best for the effect you’re looking for. While testing, set a relatively long transition-duration to better visualize the difference⁵ between the various functions. At higher speeds, you may not be able to tell the difference with the easing function; just don’t forget to set it back to under 200 milliseconds before launching your website:

nav li ul {
    transition-property: transform, opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
    ...
}

Our navigation example has transitions occurring in two directions: one transition occurs when changing from the default or initial value to the final hovered value. The second transition occurs when the user mouses off the list item and the nested unordered list returns to its previous or initial state. When the user hovers over the drop-down navigation, it transitions open; it transitions closed when the user mouses off.

We want our menu to open and become opaque fairly quickly, while appearing gradual. The ease-in value is the best for this. The timing function is reversed in the reverse direction; by default, when returning to the initial values, the transition will run in reverse order, inverting the timing function. It therefore eases in as it opens and eases out as it closes. In this example, ease-in was used, so the return trip will appear as if it was set to ease-out as it proceeds in the opposite direction, going from open to closed. This is the default behavior, but it can be controlled. Controlling the reverse transition direction is discussed in “In Reverse: Transitioning Back to Baseline”.

The transition-delay Property

The transition-delay property enables you to introduce a time delay between when the change that initiates the transition is applied to an element and when the transition begins.

If you hover over an element that has a color change on hover without a transition, the color will change immediately. Similarly, a transition-delay of 0s (the default) means the transition will begin immediately—it will start executing as soon as the state of the element is altered. Otherwise, the time value of the transition-delay defines the time offset from the moment the property values would have changed (had no transition or transition-property been applied) until the property values declared in the transition or transition-property value begins animating to the next value.

Including a transition-delay with a positive number of milliseconds (ms) or seconds (s) to delay the transition will delay the onset of the transition effect. The time unit, as s or ms, is required. Negative values of time are valid. The effects you can create with negative transition-delays are described in “Negative values”.

Continuing with the 8- (or 21-) property transition-property declaration, we can make all the properties start transitioning right away by omitting the transition-delay property or including it with a value of 0s—but that’s not a very interesting example. For the sake of examples, we could delay the start of all the even-numbered properties, while all the odd-numbered properties start right away, by including two comma-separated values, starting with 0s or 0ms:

div {
    ...
    transition-property: color, border, border-radius, transform, opacity,
        box-shadow, width, padding;
    transition-duration: 200ms;
    transition-timing-function: linear;
    transition-delay: 0s, 200ms;
}

By including transition-delay: 0s, 200ms on a series of properties, each taking 200 milliseconds to transition, we make every odd-numbered property begin its transition immediately; all the even-numbered transitions begin their transitions as soon as the odd transitions have completed.

As with transition-duration and transition-timing-function, when the number of comma-separated transition-delay values outnumbers the number of comma-separated transition-property values, the extra delay values are ignored. When the number of comma-separated transition-property values outnumbers the number of comma-separated transition-delay values, the delay values are repeated. In this case, with only two values, the first value (0s) is applied to each odd property, providing no delay, and the second value is applied to every even property, providing a 200-millisecond delay. Because we declared the transition-duration as 200ms in this scenario, every evenly numbered property will begin transitioning after 200 milliseconds, which is after every oddly numbered property has finished transitioning:

div {
    ...
    transition-property: color, border-width, border-color, border-radius,
        transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms;
    transition-timing-function: linear;
    transition-delay: 0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s, 1.2s, 1.4s, 1.6s;
}

We can even declare nine different transition-delay values so that each property begins transitioning after the previous property has transitioned. In this example, we declared each transition to last 200 milliseconds with the transition-duration property. We then declare a transition-delay that provides comma-separated delay values for each property that increment by 200 milliseconds, or 0.2 seconds—the same time as the duration of each property’s transition. That means we can make each property start transitioning as soon as the previous property has finished.

We can use math to give every transitioning property different durations and delays, ensuring they all complete transitioning at the same time:

div {
    ...
    transition-property: color, border-width, border-color, border-radius,
        transform, opacity, box-shadow, width, padding;
    transition-duration: 1.8s, 1.6s, 1.4s, 1.2s, 1s, 0.8s, 0.6s, 0.4s, 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s, 1.2s, 1.4s, 1.6s;
}

In this example, each property completes transitioning at the 1.8-second mark, but each with a different duration and delay. For each property, the transition-duration value plus the transition-delay value will add up to 1.8 seconds:

div {
    ...
    transition-property: color, border-width, border-color, border-radius,
        transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms;
    transition-timing-function: linear;
    transition-delay: 50ms;
}

Generally, you want all the transitions to begin at the same time. You can make that happen by including a single transition-delay value, which gets applied to all the properties. In our drop-down menu in Figure 2-1, we include a delay of 50 milliseconds. This delay is not long enough for the user to notice and will not cause the application to appear slow. Rather, a 50-millisecond delay can help prevent the navigation from shooting open unintentionally as the user accidentally passes over, or hovers over, the menu items while moving the cursor from one part of the page or app to another.

div {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 200ms;
  transition-delay: -150ms;
  transition-timing-function: linear;
}
div:hover {
  transform: translateX(200px);
}

nav li ul {
    transition-property: transform, opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
    transition-delay: 50ms;
    transform: scale(1, 0);
    transform-origin: top center;
    opacity: 0;
}
nav li:hover ul {
    transform: scale(1, 1);
    opacity: 1;
}

div {
    width: 100px;
    transition: width 10s steps(10, start);
}
div:hover {
    width: 200px;
}

The transition Shorthand Property

The transition shorthand property combines the four properties just described—transition-property, transition-duration, transition-timing-function, and transition-delay—into a single property.

The transition property accepts the value of none or any number of comma-separated list of single transitions. A single transition contains a single property to transition, or the keyword all to transition all the properties—preferably the duration for the transition, and optionally, the timing function and delay.

If a single transition within the transition shorthand omits the property to transition (or the keyword all), the single transition will default to all. If the transition-timing-function value is omitted, it will default to ease. If only one time value is included, that will be the duration, and there will be no delay, as if transition-delay were set to 0s. If two time values are included, the first is the transition-duration and the second is the transition-delay.

Within each single transition, the order of the duration versus the delay is important: the first value that can be parsed as a time will be set as a duration. If an additional time value is found before the comma or the end of the statement, that will be set as the delay:

nav li ul {
    transition: transform 200ms ease-in 50ms,
                  opacity 200ms ease-in 50ms;
    ...
}

nav li ul {
    transition: all 200ms ease-in 50ms;
      ...
}

nav li ul {
    transition: 200ms ease-in 50ms;
    ...
}

The shorthand for our drop-down menu can be written three different ways. In the first example, we included shorthand for each of the two properties. Because we are transitioning all the properties that change on hover, we could use the keyword all, as shown in the second example. And, as all is the default value, we could write the shorthand with just the duration, timing-function and delay. Had we used ease instead of ease-in, we could have omitted the timing function, since ease is the default.

We had to include the duration, or no transition would be visible. In other words, the only portion of the transition property that can be considered required is transition-duration.

If we simply wanted to delay the change from closed menu to open menu without a gradual transition, we would still need to include a duration of 0s. Remember, the first value parsable as time will be set as the duration, and the second one will be set as the delay:

nav li ul {
    transition: 0s 200ms; ...

If there is a comma-separated list of transitions (versus just a single declaration) and the word none is included, the entire transition declaration is invalid and will be ignored:

div {
    ...
    transition-property: color, border-width, border-color, border-radius,
        transform, opacity, box-shadow, width, padding;
    transition-duration: 200ms, 180ms, 160ms, 140ms, 120ms, 100ms, 1s, 2s, 3s;
    transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear,
        step-end, step-start, steps(5, start), steps(3, end);
    transition-delay: 0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s, 1.2s, 1.4s, 1.6s;
}

div {
    ...
    transition:
        color 200ms,
        border-width 180ms ease-in 200ms,
        border-color 160ms ease-out 400ms,
        border-radius 140ms ease-in-out 600ms,
        transform 120ms linear 800ms,
        opacity 100ms step-end 1s,
        box-shadow 1s step-start 1.2s,
        width 2s steps(5, start) 1.4s,
        padding 3s steps(3, end) 1.6s;
}

The two preceding CSS rule blocks are functionally equivalent: you can declare comma-separated values for the four longhand transition properties, or you can include a comma-separated list of single transitions. You can’t, however, mix the two: transition: transform, opacity 200ms ease-in 50ms will ease in the opacity over 200 milliseconds after a 50-millisecond delay, but the transform change will be instantaneous, with no transitionend event.

Note the duration comes before the delay in all the single transitions. Also note the first single transition omits the delay and timing-function, as the values they’re mapped to in the longhand syntax version are the properties’ default values.

How Property Values Are Interpolated

Interpolation can happen when values falling between two or more known values can be determined. Interpolatable values can be transitioned and animated.

Numbers are interpolated as floating-point numbers. Integers are interpolated as whole numbers, incrementing or decrementing as whole numbers.

In CSS, length and percentage units are translated into real numbers. When transitioning or animating calc(), or from one type of length to or from a percentage, the values will be converted into a calc() function and interpolated as real numbers.

Colors, whether they are HSLA, RGB, or named colors, are interpolated into their RGBA equivalent values for transitioning.

When animating font weights, if you use keyterms like bold, they’ll be converted to numeric values and animated in steps of multiples of 100. You may be used to writing bold and normal, but the values of 100 through 900 have been around as long as CSS—since CSS Level 1 in 1996.

When including animatable property values that have more than one component, each component is interpolated appropriately for that component. For example, text-shadow has up to four components: the color, x, y, and blur. The color is interpolated as color: the x, y, and blur components are interpolated as lengths. Box shadows have two additional optional properties: inset (or lack thereof) and spread. spread, being a length, is interpolated as such. The inset keyterm cannot be converted to a numeric equivalent: you can transition from one inset shadow to another inset shadow, or from one drop shadow to another drop shadow multi-component value, but there is no way to gradually transition between inset and drop shadows.

Similar to values with more than one component, gradients can be transitioned only if you are transitioning gradients of the same type (linear or radial) with equal numbers of color stops. The colors of each color stop are then interpolated as colors, and the position of each color stop is interpolated as length and percentage units.

.img {
    background-image:
        url(1.gif), url(2.gif), url(3.gif), url(4.gif),
        url(5.gif), url(6.gif), url(7.gif), url(8.gif),
        url(9.gif), url(10.gif), url(11.gif), url(12.gif);
    background-size: 10px 10px, 20px 20px, 30px 30px, 40px 40px;
    transition: background-size 1s ease-in 0s;
}
.img:hover {
    background-size: 25px 25px, 50px 50px, 75px 75px, 100px 100px;
}

.img {
    ...
    background-size: 10px 10px, 20px 20px, 30px 30px, 40px 40px,
                     10px 10px, 20px 20px, 30px 30px, 40px 40px,
                     10px 10px, 20px 20px, 30px 30px, 40px 40px;
    ...
}
.img:hover {
    background-size: 25px 25px, 50px 50px, 75px 75px, 100px 100px,
                     25px 25px, 50px 50px, 75px 75px, 100px 100px,
                     25px 25px, 50px 50px, 75px 75px, 100px 100px;
}

.img:hover {
    background-size: 33px 33px, 66px 66px, 99px 99px;
}

.img {
    ...
    background-size: 10px 10px, 20px 20px, 30px 30px,
                     40px 40px, 10px 10px, 20px 20px,
                     30px 30px, 40px 40px, 10px 10px,
                     20px 20px, 30px 30px, 40px 40px;
    ...
}
.img:hover {
    background-size: 33px 33px, 66px 66px, 99px 99px,
                     33px 33px, 66px 66px, 99px 99px,
                     33px 33px, 66px 66px, 99px 99px,
                     33px 33px, 66px 66px, 99px 99px;
}

transition Events Revisited

The transitionend event fires when a transition completes.

The transitionend event has three properties. propertyName is the name of the CSS property whose transition completed, and elapsedTime is the number of seconds the transition had been running at the time the event fired, not including the transition delay. The third property is the pseudoElement property, which returns the name of the pseudo-element on which the transition occurred, either ::before or ::after (with two colons), or the empty string if the transition occurred on an element and not a pseudo-element.

Currently, the transitionend event will only occur if there is a positive, nonzero transition-delay or a nonzero transition-duration. The transitionend event only occurs if the sum of transition-delay (which can be negative) and transition-duration (which can’t) is greater than zero. If there is no delay or no duration, there is no gradual transition, and no transitionend is fired, even if a property value has changed state.

You can use the addEventListener() method for the transitionend event to listen for this event.

If a keyframe animation, explained in the next chapter, is applied to a transitioning element, and it animates the same properties that are being transitioned, the animation takes precedence over the transition. Oddly, the transitionend event will still occur, but it will occur at the end of the animation.

Omitting from and to Values

If a 0% or from keyframe is not specified, then the user agent (browser) constructs a 0% keyframe using the original values of the properties being animated, as if the 0% keyframe were declared with the same property values that impact the element when no animation was applied. Similarly, if the 100% or to keyframe is not defined, the browser creates a faux 100% keyframe using the value the element would have had if no animation had been set on it.

Assuming we have a background-color change animation:

@keyframes change_bgcolor {
    45% { background-color: green; }
    55% { background-color: blue; }
}

And the element originally had background-color: red set on it, it would be as if the animation were written as:

@keyframes change_bgcolor {
    0%   { background-color: red; }
    45%  { background-color: green; }
    55%  { background-color: blue; }
    100% { background-color: red; }
}

Or, remembering that we can include multiple identical keyframes as a comma-separated list, this faux animation could have also been written as:

@keyframes change_bgcolor {
    0%,
    100% { background-color: red; }
    45%  { background-color: green; }
    55%  { background-color: blue; }
}

Note the background-color: red; declarations are not actually part of the keyframe animation. If the background color were set to yellow in the element’s default state, the 0% and 100% marks would display a yellow background, animating into green, then blue, then back to yellow as the animation progressed:

@keyframes change_bgcolor {
    0%, 100% { background-color: yellow; }
    45% { background-color: green; }
    55% { background-color: blue; }
}

We can include this change_bgcolor animation on many elements, and the perceived animation will differ based on the element’s value for the background-color property in the nonanimated state.

Negative percentages, values greater than 100%, and values that aren’t otherwise percentages or the keyterms to or from are not valid and will be ignored. Noninteger percentage values, such as 33.33%, are valid.

Repeating Keyframe Properties

In the original -webkit- implementation of animation, each keyframe could only be declared once: if declared more than once, only the last declaration would be applied, and the previous keyframe selector block was ignored. This has been updated. Now, similar to the rest of CSS, the values in the keyframe declaration blocks with identical keyframe values cascade. In the standard (nonprefixed) syntax, the preceding W animation can be written with the to, or 100%, declared twice, overriding the value of the left property:

@keyframes W {
  from, to {
    top: 0;
    left: 0;
  }
  25%, 75% {
    top: 100%;
  }
  50% {
    top: 50%;
  }
  to {
    left: 100%;
  }
}

Note that in the preceding code block, to is declared along with from as keyframe selectors for the first code block. The left value is overridden for the to in the last keyframe block.

Animatable Properties

Not all properties are animatable. Similar to the rest of CSS, the browser ignores properties and values in a keyframe declaration block that are not understood. Properties that are not animatable, with the exception of animation-timing-function, are also ignored. There is a fairly exhaustive list of animatable properties maintained by the community on the Mozilla Developer Network site.

You should not try to animate between nonnumeric values, with a few exceptions. For example, you can animate between nonnumeric values as long as they can be extrapolated into a numeric value, like named colors, which are extrapolated to hexadecimal color values.

If the animation is set between two property values that don’t have a midpoint, the results may not be what you expect: the property will not animate correctly—or at all. For example, you shouldn’t declare an element’s height to animate between height: auto and height: 300px. There is no midpoint between auto and 300px. The element may still animate, but different browsers handle this differently: Firefox does not animate the element; Safari may animate as if auto is equal to 0; and both Opera and Chrome currently jump from the preanimated state to the postanimated state halfway through the animation, which may or may not be at the 50% keyframe selector, depending on the value of the animation-timing-function. In other words, different browsers behave differently for different properties when there is no midpoint, so you can’t be sure you will get your expected outcome.

The behavior of your animation will be most predictable if you declare both a 0% and a 100% value for every property you animate.

@keyframes round {
    100% {
        border-radius: 50%;
    }
}

For example, if you declare border-radius: 50%; in your animation, you may want to declare border-radius: 0; as well, because there is no midpoint between none and anything: the default value of border-radius is none, not 0:

@keyframes square_to_round {
    0% {
        border-radius: 0%;
    }
    100% {
        border-radius: 50%;
    }
}

The round animation will animate an element using the original border-radius value of that element to a border-radius of 50% over the duration of the animation cycle. The round animation may work as expected if you are turning rounded corner buttons into ovals (but it isn’t likely to look good).

While including a 0% keyframe will ensure that your animation runs smoothly, the element may have had rounded corners to begin with. By adding border-radius: 0%; in the from keyframe, if the element was originally rounded, it will jump to rectangular corners before it starts animating. This might not be what you want. The best way to resolve this issue is to use the round animation instead of square_to_round, making sure any element that gets animated with the round keyframe animation has its border-radius explicitly set.

As long as an animatable property is included in at least one block with a value that is different then the nonanimated attribute value, and there is a possible midpoint between those two values, that property will animate.

Nonanimatable Properties That Aren’t Ignored

Exceptions to the midpoint “rule” include visibility and animation-timing-function.

Visibility is an animatable property, even though there is no midpoint between visibility: hidden and visibility: visible. When you animate from hidden to visible, the visibility value jumps from one value to the next at the keyframe upon which it is declared.

While the animation-timing-function is not, in fact, an animatable property, when included in a keyframe block, the animation timing will switch to the newly declared value at that point in the animation for the properties within that keyframe selector block. The change in animation timing is not animated; it simply switches to the new value.

Dynamically Changing @keyframes Animations

There is an API that enables finding, appending, and deleting keyframe rules. You can change the content of a keyframe block within an @keyframes animation declaration with appendRule(n) or deleteRule(n), where n is the full selector of that keyframe. You can return the contents of a keyframe with findRule(n):

@keyframes W {
  from, to {
    top: 0;
    left: 0;
  }
  25%, 75% {
    top: 100%;
  }
  50% {
    top: 50%;
  }
  to {
    left: 100%;
  }
}

The appendRule(), deleteRule(), and findRule() methods takes the full keyframe selector as an argument. Revisiting the W animation, to return the 25% / 75% keyframe, the argument is 25%, 75%:

// Get the selector and content block for a keyframe
var aRule = myAnimation.findRule('25%, 75%').cssText;

// Delete the 50% keyframe rule
myAnimation.deleteRule('50%');

// Add a 53% keyframe rules to the end of the animation
myAnimation.appendRule('53% {top: 50%;}');

The statement myAnimation.findRule('25%, 75%').cssText; where myAnimation is pointing to a keyframe animation, returns the keyframe that matches 25%, 75%. It would not match anything if we had used either 25% or 75% only. If pointing to the W animation, this statement returns 25%, 75% { top: 100%; }.

Similarly, myAnimation.deleteRule('50%') will delete the last 50% keyframe. deleteRule(n) deletes the last keyframe rule that has a keyframe selector n. To add a keyframe, myAnimation.appendRule('53% {top: 50%;}') will append a 53% keyframe after the last keyframe of the @keyframes block.

The animation-name Property

The animation-name property takes as its value the name or comma-separated list of names of the keyframe animation you want to apply to an element or group of elements. The names are the unquoted identifiers you created in your @keyframes rule.

The default value is none, which means there is no animation. The none value can be used to override any animation applied elsewhere in the CSS cascade. (This is also the reason you don’t want to name your animation none, unless you’re a masochist.) To apply an animation, include the @keyframe identifier, which is the animation name.

Using the change_bgcolor keyframe animation defined in “Omitting from and to Values”:

 div {
     animation-name: change_bgcolor;
 }

To apply more than one animation, include more than one comma-separated @keyframe identifier:

 div {
    animation-name: change_bgcolor, round, W;
 }

If one of the included keyframe identifiers does not exist, the series of animations will not fail: rather, the failed animation will be ignored, and the valid animations will be applied. While ignored initially, the failed animation will be applied if and when that identifier comes into existence as a valid animation:

 div {
    animation-name: change_bgcolor, spin, round, W;
 }

In this example, there is no spin keyframe animation defined. The spin animation will be ignored, while the change_bgcolor, round, and W animations are applied. Should a spin keyframe animation come into existence, it will be applied to the element at that time.

In order to include more than one animation, we’ve included each @keyframe animation identifier in our list of comma-separated values on the animation-name property. If more than one animation is applied to an element and those animations have repeated properties, the latter animations override the property values in the preceding animations. For example, if more than two background color changes are applied concurrently in two different keyframe animations, the latter animation will override the background property declarations of the preceding one, but only if the background colors were set to change at the same time. For more on this, see “Animation, Specificity, and Precedence Order”.

While not required, if you include three animation names, consider including three values for all the animation longhand property values, such as animation-duration and animation-iteration-count, so there are corresponding values for each attached animation. If there are too many values, the extra values are ignored. If there are too few comma-separated values, the provided values will be repeated. In other words, while it often makes sense to include the same number of values for each animation property as you do for the animation-name property, including fewer or more valid values will not invalidate the animations.

This is true as long as the keyframe identifier for the nonexistent animation is a valid identifier. change_bgcolor, spin, round, W will work in spite of there being no spin animation, but change_bgcolor, Q&A!, round, W would fail, even if a Q&A! animation is declared, as Q&A! is not a valid identifier.

Simply applying an animation to an element is not enough for the element to visibly animate, but it will make the animation occur. The keyframe properties will be interpolated, and the animationstart and animationend events will fire. A single animationstart event occurs when the animation starts, and a single animationend event occurs when the animation ends, because the property-value interpolation occurs even if there was no perceptible animation.

For an element to visibly animate, the animation must last at least some amount of time. For that we have the animation-duration property.

The animation-duration Property

The animation-duration property defines how long a single animation iteration should take in seconds (s) or milliseconds (ms).

The animation-duration property takes as its value the length of time, in seconds (s) or milliseconds (ms), it should take to complete one cycle through all the keyframes. If omitted, the animation will still be applied with a duration of 0s, with animationstart and animationend still being fired even though the animation, taking 0s, is imperceptible. Negative values are invalid.

When including a duration, you must include the second (s) or millisecond (ms) unit:

div {
   animation-name: change_bgcolor;
   animation-duration: 200ms;
 }

If you have more than one animation, you can include a different animation-duration for each animation by including more than one comma-separated time duration:

div {
   animation-name: change_bgcolor, round, W;
   animation-duration: 200ms, 100ms, 0.5s;
}

If you have an invalid value within your comma-separated list of durations, like animation-duration: 200ms, 0, 0.5s, the entire declaration will fail, and it will behave as if animation-duration: 0s had been declared. 0 is not a valid time value.

Generally, you will want to include an animation-duration value for each animation-name provided. If you have only one duration, all the animations will last the same amount of time. Having fewer animation-duration values than animation-name values in your comma-separated property value list will not fail: rather, the values that are included will be repeated. If you have a greater number of animation-duration values than animation-name values, the extra values will be ignored. If one of the included animations does not exist, the series of animations and animation durations will not fail: the failed animation, along with its duration, are ignored:

div {
    animation-name: change_bgcolor, spin, round, W;
    animation-duration: 200ms, 5s, 100ms, 0.5s;
}

In this example, the 5s, or 5 seconds, is associated with spin. As there is no spin @keyframes declaration, spin doesn’t exist, and the 5s and spin are ignored. Should a spin animation come into existence, it will be applied to the div and last 5 seconds.

The animation-iteration-count Property

Simply including the required animation-name will lead to the animation playing once. Include the animation-iteration-count property if you want to iterate through the animation more or less than the default one time.

By default, the animation will occur once. If animation-iteration-count is included, and there isn’t a negative value for the animation-delay property, the animation will repeat the number of times specified by the value if the property, which can be any number or the keyterm infinite.

If the numeric value is not an integer, the animation will end partway through its last cycle. The animation will still run, but will cut off mid-iteration on the final iteration. For example, animation-iteration-count: 1.25 will iterate through the animation 1.25 times, cutting off 25% through the second iteration. If the value is 0.25 on an 8-second animation, the animation will play about 25% of the way through, ending after 2 seconds.

Negative numbers are not valid. Like any invalid value, a negative value will lead to a default single iteration.

Interestingly, 0 is a valid value for the animation-iteration-count property. When set to 0, the animation still occurs, but zero times. It is similar to setting animation-duration: 0s: it will throw both an animationstart and an animationend event.

If you are attaching more than one animation to an element or pseudo-element, include a comma-separated list of values for animation-name, animation-duration, and animation-iteration-count:

.flag {
    animation-name: red, white, blue;
    animation-duration: 2s, 4s, 6s;
    animation-iteration-count: 3, 5;
}

The iteration-count values (and all other animation property values) will be assigned in the order of the comma-separated animation-name property value. Extra values will be ignored. Missing values will cause the existing values to be repeated. Invalid values will invalidate the entire declaration.

In the preceding example, there are more name values than count values, so the count values will repeat: red and blue will iterate three times, and white will iterate five times. There are the same number of name values as duration values; therefore, the duration values will not repeat. The red animation lasts two seconds, iterating three times, and therefore will run for six seconds. The white animation lasts four seconds, iterating five times, for a total of 20 seconds. The blue animation is six seconds per iteration with the repeated three iterations value, animating for a total of 18 seconds.

If we wanted all three animations to end at the same time, even though their durations differ, we can control that with animation-iteration-count:

.flag {
    animation-name: red, white, blue;
    animation-duration: 2s, 4s, 6s;
    animation-iteration-count: 6, 3, 2;
}

In that example, the red, white, and blue animations will last for a total of 12 seconds each: red animates over 2 seconds, iterating 6 times, for a total of 12 seconds; white lasts 4 seconds, iterating 3 times, for a total of 12 seconds; and blue lasts 6 seconds, iterating 2 times, for a total of 12 seconds. With simple arithmetic, you can figure out how many iterations you need to make one effect last as long as another, remembering that the animation-iteration-count value doesn’t need to be an integer.

The animation-direction Property

With the animation-direction property, you can control whether the animation progresses from the 0% keyframe to the 100% keyframe, or from the 100% keyframe to the 0% keyframe. You can control whether all the iterations progress in the same direction, or set every other animation cycle to progress in the opposite direction.

The animation-direction property defines the direction of the animation’s progression through the keyframes. There are four possible values:

animation-direction: normal

When set to normal (or omitted, which defaults to normal), each iteration of the animation progresses from the 0% keyframe to the 100% keyframe.

animation-direction: reverse

The reverse value sets each iteration to play in reverse keyframe order, always progressing from the 100% keyframe to the 0% keyframe. Reversing the animation direction also reverses the animation-timing-function. This property is described in “The animation-timing-function Property”.

animation-direction: alternate

The alternate value means the first iteration (and each subsequent odd-numbered iteration) should proceed from 0% to 100%, and the second iteration (and each subsequent even-numbered cycle) should reverse direction, proceeding from 100% to 0%.

animation-direction: alternate-reverse

The alternate-reverse value is similar to the alternate value, except the odd-numbered iterations are in the reverse direction, and the even-numbered animation iterations are in the normal direction. alternate-reverse alternates the direction of each iteration, beginning with reverse. The first iteration (and each subsequent odd numbered iteration) proceeds from 100% to 0%; the second iteration (and each subsequent even-numbered cycle) reverses direction, going from 100% to 0%:

.ball {
    animation-name: bouncing;
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes bouncing {
    from {
        transforms: translateY(500px);
    }
    to {
        transforms: translateY(0);
    }
}

In this example, we are bouncing our ball, but we want to start by dropping it, not by throwing it up in the air: we want it to alternate between going down and up, rather than up and down, so animation-direction: alternate-reverse is the most appropriate value for our needs.

This is a very rudimentary way of making a ball bounce. When balls are bouncing, they are moving slowest when they reach their apex and fastest when they reach their nadir. We included this example here to illustrate the alternate-reverse animation directions. We’ll revisit the bouncing animation again later to make it more realistic with the addition of timing (see “The animation-timing-function Property”). There we will also discuss how, when the animation is iterating in the reverse direction, the animation-timing-function is reversed.

The animation-delay Property

The animation-delay property defines how long the browser waits after the animation is attached to the element before beginning the first animation iteration. The default value is 0s, meaning the animation will commence immediately when it is applied. A positive value will delay the start of the animation until the prescribed time, listed as the value of the animation-delay property has elapsed. A negative value will cause the animation to begin immediately—but it will start partway through the animation.

The animation-delay property sets the time, defined in seconds (s) or milliseconds (ms), that the animation will wait between when the animation is attached to the element and when the animation begins executing. By default, the animation begins iterating as soon as it is applied to the element, with a 0-second delay.

Unlike animation-duration, a negative value for the animation-delay property is valid. Negative values for animation-delay can create interesting effects. A negative delay will execute the animation immediately but will begin animating the element part way through the attached animation. For example, if animation-delay: -4s and animation-duration: 10s are set on an element, the animation will begin immediately but will start approximately 40% of the way through the first animation.

I say “approximately” because it will not necessarily start at the 40% keyframe block: when the 40% mark of an animation occurs depends on the value of the animation-timing-function. If animation-timing-function: linear is set, then it will be 40% through the animation, at the 40% keyframe, if there is one:

div {
  animation-name: move;
  animation-duration: 10s;
  animation-delay: -4s;
  animation-timing-function: linear;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(1000px);
  }
}

In this linear animation example, we have a 10-second animation with a 4-second delay. In this case, the animation will start immediately 40% of the way through the animation, with the div translated 400 pixels to the right of its original position.

If an animation is set to occur 10 times, with a delay of -800 milliseconds and an animation duration of 200 milliseconds, the element will start animating right away, at the beginning of the fifth iteration:

.ball {
  animation-name: bounce;
  animation-duration: 200ms;
  animation-delay: -600ms;
  animation-iteration-count: 10;
  animation-timing-function: ease-in;
  animation-direction: alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(500px);
  }
}

Instead of animating for 2,000 milliseconds (200 ms x 10 = 2,000 ms), or 2 seconds, starting in the normal direction, the ball will animate for 1,400 milliseconds with the animation starting immediately—but at the start of the fourth iteration, and in the reverse direction. The animation-direction is set to alternate, meaning every even iteration iterates in the reverse direction from the 100% keyframe to the 0% keyframe. The fourth iteration, which is an even-numbered iteration, is the first visible iteration.

The animation will throw the animationstart event immediately. The animationend event will occur at the 1,400-millisecond mark. The ball will be tossed up, rather than bounced, throwing 6 animationiteration events, after 200, 400, 600, 800, 1,000, and 1,200 milliseconds. While the iteration count was set to 10, we only get 6 animationiteration events because we are only getting 7 iterations; 3 iterations didn’t occur because of the negative animation-delay, and the last iteration concluded at the same time as the animationend event. Remember, when an animationiteration event would occur at the same time as an animationend event, the animationiteration event does not occur.

Let’s take a deeper look at animation events before continuing.

Animation Events

There are three different types of animation events: animationstart, ani⁠mat⁠ion​ite⁠rati⁠on, and animationend. For browsers still prefixing animations, these events are supported when written as webkitAnimationStart, webkitAnimationIteration, and webkitAnimationEnd. Each event has three read-only properties of ani⁠mat⁠ion​Na⁠me, elapsedTime, and pse⁠udo​Ele⁠ment, unprefixed in all browsers.

The animationstart event occurs at the start of the animation: after the animation-delay (if present) has expired, or immediately if there is no delay set. If a negative animation-delay value is present, the animationstart will fire immediately, with an elapsedTime equal to the absolute value of the delay in supporting browsers. In browsers where prefixing is still necessary, the elapsedTime is 0:

.noAnimationEnd {
    animation-name: myAnimation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.startAndEndSimultaneously {
    animation-name: myAnimation;
    animation-duration: 0s;
    animation-iteration-count: infinite;
}

The animationend event occurs when the animation finishes. If the animation-iteration-count is set to infinite as long as the animation-duration is set to a time greater than 0, the event will never fire. If the animation-duration is set or defaults to 0 seconds, even when the iteration count is infinite animationstart and animationend will occur virtually simultaneously, in that order.

The animationiteration event fires between iterations. The animationend event fires at the conclusion of iterations that do not occur at the same time as the conclusion of the animation itself; the animationiteration and animationend events do not fire simultaneously:

.noAnimationIteration {
    animation-name: myAnimation;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

In the .noAnimationIteration example, with the animation-iteration-count set to a single occurrence, the animation ends at the conclusion of the first and only iteration. When the animationiteration event would occur at the same time as an animationend, the animationend event occurs, but the animationiteration event does not. The animationiteration does not fire unless an animation cycle ends and another begins.

When the animation-iteration-count property is omitted, or when its value is 1 or less, no animationiteration event will be fired. As long as an iteration finishes (even if it’s a partial iteration) and the next iteration begins, if the duration is greater than 0s, an animationiteration event will occur.

If the animation-iteration-count is omitted, or has an invalid value, it defaults to animation-iteration-count: 1. Because the animationiteration event does not fire if it would occur at the same time as the animationend, the animationiteration event will not occur when animation-iteration-count is omitted, even though a full cycle of the animation may occur:

.noAnimationIteration {
    animation-name: myAnimation;
    animation-duration: 1s;
    animation-iteration-count: 4;
    animation-delay: -3s;
}

When an animation iterates through fewer cycles than listed in the animation-iteration-count because of a negative animation-delay, there are no animationiteration events for the non-occurring cycles. In the preceding example code, there are no ani⁠mat⁠ion​ite⁠rat⁠ion events, as the first three cycles do not occur (due to the -3s animation-delay), and the last cycle finishes at the same time the animation ends.

In that example, the elapsedTime on the animationstart event is 3, as it is equal to the absolute value of the delay. This is supported in browsers that can handle unprefixed animations.

.rainbow {
    animation-name: red, orange, yellow, blue, green;
    animation-duration: 1s, 3s, 5s, 7s, 11s;
    animation-delay: 3s, 4s, 7s, 12s, 19s;
}

li:first-of-type {
    animation-name: red;
    animation-duration: 1s;
    animation-delay: 3s;
}
li:nth-of-type(2) {
    animation-name: orange;
    animation-duration: 3s;
    animation-delay: 4s;
}
li:nth-of-type(3)  {
    animation-name: yellow;
    animation-duration: 5s;
    animation-delay: 7s;
}
li:nth-of-type(4) {
    animation-name: green;
    animation-duration: 7s;
    animation-delay: 12s;
}
li:nth-of-type(5) {
    animation-name: blue;
    animation-duration: 11s;
    animation-delay: 19s;
}

/* Don't do this */
* {
    transform: translateZ(0);
}

document.querySelectorAll('li')[0].addEventListener( 'animationend',
  function(e) {
      document.querySelectorAll('li')[1].style.animationName = 'orange';
  },
  false );

document.querySelectorAll('li')[1].addEventListener( 'animationend',
  function(e) {
      document.querySelectorAll('li')[2].style.animationName = 'yellow';
  },
  false );

document.querySelectorAll('li')[2].addEventListener( 'animationend',
  function(e) {
      document.querySelectorAll('li')[3].style.animationName = 'green';
  },
  false );

document.querySelectorAll('li')[3].addEventListener( 'animationend',
  function(e) {
      document.querySelectorAll('li')[4].style.animationName = 'blue';
  },
  false );

li:first-of-type {
  animation-name: red;
  animation-duration: 1s;
}
li:nth-of-type(2) {
  animation-duration: 3s;
}
li:nth-of-type(3)  {
  animation-duration: 5s;
}
li:nth-of-type(4) {
  animation-duration: 7s;
}
li:nth-of-type(5)  {
  animation-duration: 11s;
}

document.querySelectorAll('li')[2].addEventListener( 'animationend',
  function(e) {
      document.querySelectorAll('li')[3].style.animationName = 'green';
  },
  false );

document.querySelectorAll('li')[3].addEventListener( 'animationend',
  function(e) {
      document.querySelectorAll('li')[4].style.animationName = 'blue';
  },
  false );

  li:nth-of-type(4) {
  animation-duration: 7s;
}
li:nth-of-type(5)  {
  animation-duration: 11s;
}

document.querySelectorAll('li')[2].addEventListener( 'animationend',
  function(e) {
      document.querySelectorAll('li')[3].style.animationName = 'green';
      document.querySelectorAll('li')[4].style.animationName = 'blue';
  },
false );

li:nth-of-type(4) {
  animation-duration: 7s;
}
li:nth-of-type(5)  {
  animation-delay: 7s;
  animation-duration: 11s;
}

.animate3times {
    background-color: red;
    animation: color_and_scale_after_delay;
    animation-iteration-count: 3;
    animation-duration: 5s;
}

@keyframes color_and_scale_after_delay {
    80% {
        transform: scale(1);
        background-color: red;
    }
    80.1% {
        background-color: green;
        transform: scale(0.5);
    }
    100% {
        background-color: yellow;
        transform: scale(1.5);
    }
}

.animate3times {
    background-color: red;
    animation: color_and_scale_3_times;
    animation-iteration-count: 1;
    animation-duration: 15s;
}

@keyframes color_and_scale_3_times {
  0%, 13.32%, 20.01%, 40%, 46.67%, 93.32% {
        transform: scale(1);
        background-color: red;
  }
    13.33%, 40.01%, 93.33% {
        background-color: green;
        transform: scale(0.5);
  }
    20%, 46.66%, 100% {
        background-color: yellow;
        transform: scale(1.5);
  }
}

.animate3times {
  animation: color_and_scale, color_and_scale, color_and_scale;
  animation-delay: 0, 4s, 10s;
  animation-duration: 1s;
}

@keyframes color_and_scale {
    0% {
        background-color: green;
        transform: scale(0.5);
    }
    100% {
        background-color: yellow;
        transform: scale(1.5);
    }
}

var iteration = 0;
var el = document.getElementById('myElement');

el.addEventListener('animationend', function(e) {
  var time = ++iteration * 1000;

  el.classList.remove('animationClass');

  setTimeout(function() {
    el.classList.add('animationClass');
  }, time);

});

The animation-timing-function Property

Similar to the transition-timing-function property, the animation-timing-function property describes how the animation will progress over one cycle of its duration, or iteration.

Other than the step timing functions, described in “The step timing functions”, the timing functions are all Bézier curves. Just like the transition-timing-function, the CSS specification provides for five predefined Bézier curve keyterms, as shown in Figure 3-1 and Table 3-1.

Figure 3-1. Cubic Bézier named functions

A handy tool to visualize Bézier curves and to create your own is Lea Verou’s cubic Bézier visualizer.

The default ease is equal to cubic-bezier(0.25, 0.1, 0.25, 1), which has a slow start, then speeds up, and ends slowly. This function is similar to ease-in-out at cubic-bezier(0.42, 0, 0.58, 1), which has a greater acceleration at the beginning. linear is equal to cubic-bezier(0, 0, 1, 1), and, as the name describes, creates an animation that animates at a constant speed.

ease-in is equal to cubic-bezier(0.42, 0, 1, 1), which creates an animation that is slow to start, gains speed, then stops abruptly. The opposite ease-out timing function is equal to cubic-bezier(0, 0, 0.58, 1), starting at full speed, then slowing progressively as it reaches the conclusion of the animation iteration.

If none of these work for you, you can create your own Bézier curve timing function by passing four values, such as:

animation-timing-function: cubic-bezier(0.2, 0.4, 0.6, 0.8);

Bézier curves are mathematically defined parametric curves used in two-dimensional graphic applications. See Table 2-3 for examples of curves you can define yourself in CSS.

The Bézier curve takes four values, defining the originating position of the two handles. In CSS, the anchors are at 0, 0 and 1, 1. The first two values define the x and y of the first point or handle of the curve, and the last two are the x and y of the second handle of the curve. The x values must be between 0 and 1, or the Bézier curve is invalid. When creating your own Bézier curve, remember: the steeper the curve, the faster the motion. The flatter the curve, the slower the motion.

While the x values must be between 0 and 1, by using values for y that are greater than 1 or less than 0, you can create a bouncing effect, making the animation bounce up and down between values, rather than going consistently in a single direction:

.snake {
  animation-name: shrink;
  animation-duration: 10s;
  animation-timing-function: cubic-bezier(0, 4, 1, -4);
  animation-fill-mode: both;
}

@keyframes shrink {
  0% {
    width: 500px;
  }
  100% {
    width: 100px;
  }
}

This animation-timing-function value makes the property values go outside the boundaries of the values set in the 0% and 100% keyframes. In this example, we are shrinking an element from 500px to 100px. However, because of the cubic-bezier values, the element we’re shrinking will actually grow to be wider than the 500px width defined in the 0% keyframe and narrower than the 100px width defined in the 100% keyframe, as shown in Figure 3-2.

Figure 3-2. Effect of outlandish Bézier curve

In this scenario, with animation-timing-function: cubic-bezier(0, 4, 1, -4); set on an animation that is shrinking an element from from 500px to 100px wide, the snake starts with a width of 500px, defined in the 0% keyframe. It then quickly shrinks down to a width of about 40px, which is narrower than width: 100px; (which was declared in the 100% keyframe) before slowly expanding to about 750px wide, which is larger than the original width of width: 500px declared as the original (and widest) declared width. It then quickly shrinks back down to width: 100px, which is the value defined in the 100% keyframe. You can test this and your own cubic Bézier values.

You may have realized that the curve created by our animation is the same curve as our Bézier curve. Just like our s-curve goes below and above our bounding box, the width of our animation goes narrower than the smaller width we set of 100px and wider than the larger width we set of 500px.

The Bézier curve has the appearance of a snake, going up and down and up again, because one y coordinate is positive and the other negative. If both are positive values greater than 1 or both are negative values less than -1, the Bézier curve is arc-shaped, going above or below one of the values set, but not bouncing out of bounds on both ends like the s-curve above.

The timing function declared for the animation-timing-function is the timing for the normal animation direction, when the animation is progressing from the 0% mark to the 100% mark. When the animation is running in the reverse direction, from the 100% mark to the 0% mark, the animation timing function is reversed:

.ball {
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-direction: alternate;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(500px);
  }
}

If we remember the bouncing ball example , when the ball is dropping it gets faster as it nears its nadir at the 100% keyframe, with the animation-timing-function set to ease-in. When it is bouncing up, it is animating in the reverse direction, from 100% to 0%, so the animating-timing-function is reversed as well, to ease-out, slowing down as it reaches its apex. Our original defaulted to ease. This timing function makes the bouncing ball look a bit more realistic.

The step timing functions

The step timing functions, step-start, step-end, and steps(), aren’t Bézier curves. Rather, they’re tweening definitions.

The steps() timing function divides the animation into a series of equal-length steps. steps() takes two parameters: the number of steps and the direction.

The steps() function is most useful when it comes to character or sprite animation. If you want to animate complex shapes that subtly change, like the drawings or pictures in a flip book, the steps() timing function is the solution.

The number of steps is the first parameter; its value must be a positive integer. The animation will be divided equally into the number of steps provided. For example, if the animation duration is 1 second and the number of steps is 5, the animation will be divided into five 200-millisecond steps, with the element being redrawn to the page 5 times, at 200-millisecond intervals, moving 20% through the animation at each interval.

If an animation were to pass through 5 steps, that means it either draws the animation at the 0%, 20%, 40%, 60%, and 80% keyframes or at the 20%, 40%, 60%, 80%, and 100% keyframes. It will either skip drawing the 100% or the 0% keyframe. That is where the direction parameter comes in.

The direction parameter takes one of two values: either start or end. The direction determines if the function is left- or right-continuous: basically, if the 0% or the 100% keyframe is going to be skipped. Including start as the second parameter will create a left-continuous function, meaning the first step happens when the animation begins, skipping the 0%, but including the 100%. Including end or omitting the second parameter (end is the default direction) will create a right-continuous function. This mean the first step will be at the 0% mark, and the last step will be before the 100% mark. With end, the 100% keyframe will not be seen unless animation-fill-mode of either forwards or both is set. See “The animation-fill-mode Property”.

The direction parameter can be hard to remember. I like to think of it this way: the start value skips the start value of 0%, and the end value skips the ending value of the 100% keyframe.

The step-start value is equal to steps(1, start), with only a single step displaying the 100% keyframe. The step-end value is equal to steps(1, end), which displays only the 0% keyframe.

Consider the flip book. A flip book is a book with a series of pictures. Each page contains a single drawing or picture that changes slightly from one page to the next, like one frame from a movie reel or cartoon stamped onto each page. When the pages of a flip book are flipped through rapidly (hence the name), the pictures appear as an animated motion. You can create similar animations with CSS using an image sprite, the background-position property, and the steps() timing function.

Figure 3-3 shows an image sprite containing several images that change just slightly, like the drawings on the individual pages of our flip book.

Figure 3-3. Sprite of dancing

We put all of our slightly differing images into a single image called a sprite. Each image in our sprite is a frame in the single animated image we’re creating.

We create a container element that is the size of a single image of our sprite and attach the sprite as the container element’s background image. We then animate the background-position, using the steps() timing function so we only see a single instance of the changing image of our sprite at a time. The number of steps in our steps() timing function is the number of occurrences of the image in our sprite. The number of steps defines how many stops our background image makes to complete a single animation.

The sprite in Figure 3-3 has 22 images, each 56 x 100 pixels. The total size of our sprite is 1232 x 100 pixels. We set our container to the individual image size: 56 x 100 pixels. We set our sprite as our background image: the initial or default value of background-position is top left, which is the same as 0 0. Our image will appear at 0 0, which is a good default: older browsers that don’t support CSS animation will simply display the first image from our sprite:

.dancer {
  height: 100px;
  width: 56px;
  background-image: url(../images/dancer.png);
  ....
}

The trick is to use steps() to change the background-position value so that each frame is a view of a separate image within the sprite. Instead of sliding in the background image from the left, the steps() timing function will pop in the background image in the number of steps we declared.

We declare our animation to simply be a change in the left-right value of the background-position. The image is 1,232 pixels wide, so we move the background image from 0 0, which is the left top, to 0 -1232px, putting the sprite fully outside of our 56 x 100 pixel <div> viewport.

The values of -1232px 0 will move the image completely to the left, outside of our containing block viewport. It will no longer show up as a background image in our 100 x 56 pixel div at the 100% mark unless background-repeat is set to repeat along the x-axis. We don’t want that to happen!

With the steps(n, end) syntax, the 100% keyframe never gets shown as the animation runs. Had we used start instead of end, the 0% keyframe wouldn’t show. With end, the 100% keyframe is skipped instead. Because we used end, the 100% keyframe—when the background image is outside of the border box of our element—doesn’t show. This is what we want:

@keyframes dance_in_place {
  from {
      background-position: 0 0;
  }
  to {
      background-position: -1232px 0;
  }
}

.dancer {
  ....
  background-image: url(../images/dancer.png);
  animation-name: dance_in_place;
  animation-duration: 4s;
  animation-timing-function: steps(22, end);
  animation-iteration-count: infinite;
}

We used steps(22, end). We use the end direction to show the 0% keyframe, but not the 100% keyframe. What may have seemed like a complex animation is very simple: just like a flip book, we see one frame of the sprite at a time. Our keyframe animation simply moves the background.

@keyframes move_around {
  0%, 100% {
    transform: translate(0, -40px) scale(0.9);
  }
  25%  {
    transform: translate(40px, 0)  scale(1);
  }
  50%  {
    transform: translate(0, 40px)  scale(1.1);
  }
  75%  {
    transform: translate(-40px, 0) scale(1);
  }
}

.dancer {
    ....
    background-image: url(../images/dancer.png);
    animation-name: dance_in_place, move_around;
    animation-duration: 4s, 16s;
    animation-timing-function: steps(22, end), steps(5, end);
    animation-iteration-count: infinite;
}

Animating the animation-timing-function

The animation-timing-function is not an animatable property, but it can be included in a keyframe to alter the current timing of the animation.

When included within a keyframe, the animation-timing-function doesn’t transition from one value to another over time. Rather, the timing function applies between keyframes, updating the timing function when it reaches a keyframe that has a timing function defined.

While none of the animation properties are animatable, animation-timing-function is the only CSS animation property that has an effect when specified on individual keyframes. Unlike animatable properties, the animation-timing-function values aren’t interpolated over time. When included in a keyframe within the @keyframes definition, the timing function for the properties declared within that same keyframe will change to the new animation-timing-function value when that keyframe is reached, as shown in Figure 3-4:

@keyframes width {
  0% {
    width: 200px;
    animation-timing-function: linear;
  }
  50% {
    width: 350px;
    animation-timing-function: ease-in;
  }
  100% {
    width: 500px;
  }
}

Figure 3-4. Animation timing function can be changed midanimation

In other words, the rate at which the animation proceeds can be altered mid animation. In the preceding example, as shown in Figure 3-4, halfway through the animation, we switch from a linear animation progression for the width property to one that eases in.

We can include the animation-timing-function within our keyframe animation definitions to override this default inverting behavior or to control the timing in any other way we please. The animation-timing-function property isn’t animated in the sense of changing from one value to another over time. Rather, it changes from one value to the next when it reaches a keyframe selector that declares a change to that value.

Specifying the animation-timing-function within the to or 100% keyframe will have no effect on the animation. When included in the from or 0% keyframe, the animation will follow the animation-timing-function specified in the keyframe definition, overriding the element’s default or declared animation-timing-function.

Note

The specification states explicitly the timing function should only impact the progression of an animation if it is declared in any keyframe other than the to or 100% keyframe values. An animation-timing-function declaration in the 100% or to keyframe has no effect, as per current implementations and the specification.

If the animation-timing-function property is included in a keyframe, only the properties also included in that keyframe block will have their timing function impacted. This is not currently specified in the CSS specification, but it is implemented as such and is expected to be included in the final specification. If we take our W animation as an example:

@keyframes W {
    from {
      left: 0;
      top: 0;
    }
    25%, 75% {
      top: 100%;
    }
    50% {
      top: 50%;
    }
    to {
      left: 100%;
      top: 0;
    }
}

This follows the idea that conceptually, when an animation is set on an element or pseudo-element, it is as if a set of keyframes is created for each property that is present in any of the keyframes, as if an animation is run independently for each property that is being animated. It’s as if the W animation were made up of two animations that run simultaneously: W_part1 and W_part2.

@keyframes W_part1 {
    from, to {
      top: 0;
    }
    25%, 75% {
      top: 100%;
    }
    50% {
      top: 50%;
    }
}

@keyframes W_part2 {
    from {
      left: 0;
    }
    to {
      left: 100%;
    }
}

The animation-timing-function that is set on any of the keyframes is added to the progression of only the properties that are defined at that keyframe:

@keyframes W {
    from {
      left: 0;
      top: 0;
    }
    25%, 75% {
      top: 100%;
    }
    50% {
      animation-timing-function: ease-in;
      top: 50%;
    }
    to {
      left: 100%;
      top: 0;
    }
}

You can have multiple occurrences of a keyframe value, such as 50%, as the current implementation stands, but the animation-timing-function and property have to be in the same selector block for the animation-timing-function change to have an impact. The preceding code will change the animation-timing-function to ease-in for the top property only, not the left property, impacting only the W_part1 section of our W animation.

However, with the following animation, the animation-timing-function (in a keyframe block that has no property/value declarations) will have no effect:

@keyframes W {
    from {
      left: 0;
      top: 0;
    }
    25%, 75% {
      top: 100%;
    }
    50% {
      animation-timing-function: ease-in;
    }
    50% {
      top: 50%;
    }
    to {
      left: 100%;
      top: 0;
    }
}

How is it useful to change the timing function midanimation? In the bounce animation, we had a frictionless environment: the ball bounced forever, never losing momentum. We had a very simple animation that iterated forever. The ease-in timing function made it speed up as it dropped, when it was in the normal animation direction. We took advantage of timing functions being inverted in the reverse animation direction: in this case, as if it was set to ease-out in the reverse direction. With our infinite animation, the ball sped up as it dropped and slowed as it rose because the timing function was inverted from ease-in to ease-out by default as the animation proceeded from the normal to reverse direction every other iteration.

In reality, friction exists; momentum is lost. Balls will not continue to bounce indefinitely. If we want our bouncing ball to look natural, we have to make it bounce less high as it loses energy with each impact. To do this, we need a single animation that bounces multiple times, losing momentum on each bounce, while switching between ease-in and ease-out at each apex and nadir:

@keyframes bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  30% {
    transform: translateY(100px);
    animation-timing-function: ease-in;
  }
  58% {
    transform: translateY(200px);
    animation-timing-function: ease-in;
  }
  80% {
    transform: translateY(300px);
    animation-timing-function: ease-in;
  }
  95% {
    transform: translateY(360px);
    animation-timing-function: ease-in;
  }
  15%, 45%, 71%, 89%, 100% {
    transform: translateY(380px);
    animation-timing-function: ease-out;
  }
}

This animation loses height after a few bounces, eventually stopping. This more realistic animation has a single iteration, with the granular control provided via the keyframe blocks.

In the case of a single iteration, we can’t rely on the animation-direction to change our timing function. We need to ensure that while each bounce causes the ball to lose momentum, it still speeds up with gravity and slows down as it reaches its apex. Because we will have only a single iteration, we control the timing by including animation-timing-function within our keyframes. At every apex, we switch to ease-in, and at every nadir, or bounce, we switch to ease-out.

The animation-play-state property

The animation-play-state property defines whether the animation is running or paused.

When set to the default running, the animation proceeds as normal. If set to paused, the animation will be paused. When paused, the animation is still applied to the element, halted at the progress it had made before being paused. When set back to running or returned to the default of running, it restarts from where it left off, as if the “clock” that controls the animation had stopped and started again.

If the property is set to animation-play-state: paused during the delay phase of the animation, the delay clock is also paused and resumes expiring as soon as animation-play-state is set back to running.

The animation-fill-mode Property

The animation-fill-mode property defines what values are applied by the animation before and after the animation iterations are executed. The animation-fill-mode property enables us to define whether or not an element’s property values are applied by the animation outside of the animation execution. The duration of the animation execution is set by the number of iterations multiplied by the duration, less the absolute value of any negative delay.

With animation-fill-mode, we can define how the animation impacts the element on which it is set before the animationstart and after the animationend events are fired. We can define whether the property values set in the 0% keyframe are applied to the element during the expiration of any animation delay, and if the property values that exist when the animationend event is fired continue to be applied to the animated element after the animation’s conclusion, or if the properties revert to the values they had in their initial state prior to the attachment of the animation.

By default, an animation will not affect the property values of the element immediately if there is a positive animation-delay applied. Rather, animation property values are applied when the animation-delay expires, when the animationstart event is fired. By default, the animation property values are applied until the last iteration has completed: at the completion of the animation, when the animationend event is fired. At that time, the element’s property values revert back to its nonanimated values.

The animation-fill-mode property lets us apply the property values of any from or 0% keyframes to an element from the time the animation is applied to that element until the expiration of the animation delay. It also enables us to maintain the property values of the 100% or to keyframe after the last animation cycle is complete, from the time the animationend event has fired until forever—or until the animation is removed from the element.

The default value is none, which means the animation has no effect when it is not executing: the animation’s 0% keyframe block property values are not applied to the animated element until the animation-delay has expired, when the animationstart event is fired.

When the value is set to backwards, the property values from the 0% or from keyframe (if there is one) will be applied to the element as soon as the animation is applied to the element. The 0% keyframe property values are applied immediately (or 100% keyframe, if the value of the animation-direction property is reversed or reversed-alternate), without waiting for the animation-delay time to expire, before the animationstart event fires.

The value of forwards means when the animation is done executing—has concluded the last part of the last iteration as defined by the animation-iteration-count value—it continues to apply the values of the properties at the values as they were when the animationend event occurred. If the iteration-count has an integer value, this will be either the 100% keyframe, or, if the last iteration was in the reverse direction, the 0% keyframe.

The value of both applies both the backwards effect of applying the property values when the animation is attached to the element and the forwards value of persisting the property values from when the animationend event occurred.

If the animation-iteration-count is a float value, and not an integer, the last iteration will not end on the 0% or 100% keyframe: the animation will end its execution partway through an animation cycle. If the animation-fill-mode was set forwards or both, the element will maintain the property values it had when the animationend event occurred. For example, if the animation-iteration-count is 6.5, and the animation-timing-function is linear, the animationend event fires and the values of the properties at the 50% mark (whether or not a 50% keyframe is explicitly declared) will stick, as if the animation-play-state had been set to pause at that point.

For example, if we take the following code:

@keyframes move_me {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1000px);
  }
}

.moved {
  animation-name: move_me;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 0.6;
  animation-fill-mode: forwards;
}

The animation will only go through 0.6 iterations. Being a linear 10-second animation, it will stop at the 60% mark 6 seconds into the animation, when the element is translated 600 pixels to the right. With animation-fill-mode set to forwards or both, the animation will stop animating when it is translated 600 pixels to the right, holding the moved element 600 pixels to the right of its original position, keeping it translated indefinitely, or until the animation is detached from the element.

In Safari 9 and earlier, forwards and both will set the values from the 100% keyframe onto the element, no matter the direction of the last iteration or whether the animation otherwise ended on the 100% keyframe or elsewhere in the animation. In the preceding example, in Safari 9, the .moved element will jump from being translated by 400 pixels to the right to be 1,000 pixels to the right of where it normally would have been and stay there indefinitely or until the animation is detached from the moved element. In Safari 9 and earlier, it doesn’t matter whether the last iteration was normal or reverse, or whether the animation ended 25% or 75% of the way through an animation cycle; animation-fill-mode: forwards; causes the animation to jump to the 100% frame and stay there. This follows an older version of the specification, but we expect it will be updated to match the updated specification and all other evergreen browsers.

The backwards value controls what happens to the element from the time the animation is attached to the element until the time the animation delay expires, the animation starts executing, and the animationstart event is fired. Before the animation starts executing (during the period specified by a positive animation-delay value), the animation applies the values it will have when the animation starts executing. If the animation-direction is normal or alternate, the values specified in the animation’s 0% keyframe are applied immediately when the animation is attached. If the animation-direction is reverse or alternate-reverse, the property values of the 100% keyframe are used.

The value of both simply means that both the forwards and backwards fill modes will be applied. Most times when you set an animation, you will set the animation-fill-mode property to both. This ensures that the animated element’s properties don’t jump from the element’s default state to the animated state at the start of execution, and that the element’s properties don’t jump back to its original property values at the animation’s end. Having properties jump from one value to another before or after a smooth animation is generally the opposite of what you’re trying to do.

With both, as soon as the animation is attached to an element, that element will assume the properties provided in the 0% keyframe (or 100% keyframe if animation-direction is set to reverse or alternate-reverse). When the last iteration concludes, it will be as if the animation-fill-mode were set to forwards: if it was a full iteration in the normal direction, the property values of the 100% keyframe will be applied. If the last cycle was in the reverse direction, the property values of the 0% keyframe will be applied. With forwards and both, whether or not the last iteration was a full iteration, the values that were present when the animationend event occurred will stay in effect.

If the animation-duration is set to 0s and backward or both is set, the animation will stay on the 0% keyframe (or 100% keyframe if animation-direction is set to reverse or reverse-alternate) until the animation delay has expired. With no duration, it will immediately jump to the 100% keyframe (or the 0% keyframe if animation-direction is set to reverse or reverse-alternate). If both or forwards is set, it will stay on that final keyframe in perpetuity or until the animation is removed from the element or generated content. This happens no matter the value of the animation-iteration-count, even if the count is 0. In that case, the animationstart and animationend events will occur in succession at the expiration of the delay, and there will be no animationiteration event.

If the 0% or 100% keyframes are not explicitly defined, the browser uses the implied values for those keyframes: the values set forth on the element itself. If an keyframe animation has neither a 0% or 100% keyframe set, setting animation-fill-mode: backwards will have no impact. Similarly, in the case where the animation-iteration-count is an integer and no 0% or 100% keyframe is set, setting animation-fill-mode to forwards or both has no impact. If the iteration count is a float, even if there are no to or from keyframes, if there is an intermediary keyframe block with property values set, forwards, backwards, and both should have an impact, other than in Safari ≤9.

The animation Shorthand Property

The animation shorthand property enables us to use one line instead of eight to define all the animation properties on an element. The animation property value is a list of space-separated values for the various longhand animation properties. If you are setting multiple animations on an element or pseudo-element, include the multiple space-separated animation shorthands as a comma-separated list of animations.

The animation shorthand takes as its value all the other preceding animation properties, including animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-name:

#animated {
  animation: 200ms ease-in 50ms 1 normal running forwards slidedown;
}

is the equivalent of:

#animated {
  animation-name: slidedown;
  animation-duration: 200ms;
  animation-timing-function: ease-in;
  animation-delay: 50ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-play-state: running;
}

or:

#animated {
  animation: 200ms ease-in 50ms forwards slidedown;
}