@keyframes

The @keyframes CSS at-rule is used to define the behavior of one cycle of a CSS animation.

Animations are similar to transitions in that they change the presentational value of CSS properties over time. The main difference is that while transitions trigger implicitly when property values change (for example, when a property value changes on hover), animations are explicitly executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated. These values are defined using animation keyframes specified in the @keyframes rule. So, a @keyframes at-rule is made up of an encapsulated set of CSS style rules that describe how the property values change over time.

Then, using the different CSS animation properties, many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.

To define an animation you have to start with the @keyframes rule. A @keyframe rule consists of the keyword “@keyframes“, followed by an identifier giving a name for the animation (which will be referenced using animation-name), followed by a set of style rules (delimited by curly braces). The animation is then applied to an element by using the identifier as a value for the animation-name property. For example:

/* define the animation */
@keyframes your-animation-name {
    /* style rules */
}

/* apply it to an element */
.element {
    animation-name: your-animation-name;

    /* OR using the animation shorthand property */
    animation: your-animation-name 1s ...
}
                

What goes inside the curly braces of an @keyframes rule?

Inside the curly braces, you define keyframes, or waypoints, that specify the values for the properties you’re animating, at certain points during the animation. This allows you to control the intermediate steps in a sequence of animations. For example, a simple animation @keyframe may look like this:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}
                

The ‘0%’ and ‘100%’ are keyframe selectors each of which defines a keyframe rule. The keyframe declaration block for a keyframe rule consists of properties and values.

The above animation is similar to a simple transition effect: the background color is animated from one value at the beginning of the animation (0%) till it reaches another value at the end of the animation (100%). The ‘0%’ and ‘100%’ keyframe selectors define the waypoints, or percentage points in time, that you want the animating properties to change values at. You can also use the selector keywords from and to instead of using 0% and 100%, respectively, as they are equivalent.

@keyframes change-bg-color {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}
                

A keyframe selector consists of one or multiple comma-separated percentage values or the from and to keywords. Note that the percentage unit specifier must be used on percentage values. Therefore, ‘0’ is an invalid keyframe selector.

The following is an example of an animation with keyframe selectors including multiple comma-separated percentage values and/or the keyword keyframe selectors from and to.

@keyframes bouncing {
    0%, 50%, 100% { /* OR from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}
                

The above @keyframes rule says that the element’s top offset will be equal to zero at the beginning, halfway though, and end of the animation, and that it will be equal to 100px quarter and three quarters of the way through; this means that the element is moving up and down several times through the animation cycle. The above declaration can also be written as follows:

@keyframes bouncing {
    0% {
        top: 0;
    }
    25% {
        top: 100px;
    }
    50% {
        top: 0;
    }
    75% {
        top: 100px;
    }
    100% {
        top: 0;
    }
}
                

Of course, when you have multiple same declaration blocks, it is useful to use the comma-separated list of keyframe percentages than repeat the blocks multiple times in a @keyframes declaration.

You can animate multiple properties inside a keyframe rule and use multiple keyframes to specify an element’s property values at specific points in time.

For example, suppose you have an element that you want to animate from one position to another, horizontally. Using a CSS transition, you could move it from its initial to its final position, and have the browser calculate the intermediate positions so that the path from the initial to the final position is linear (a straight line). But, using an animation, you can have your element move in a non-linear path from the beginning to the end, by controlling its position at certain points in time during the animation. In the next example, we’re going to move an element from a start position to a final position in a triangular path, instead of a straight line.

@keyframes jump {
    0% {
        left: 0; top: 0;
    }
    50% {
        left: 200px; top: -200px;
    }
    100% {
        left: 400px; top: 0;
    }
}

.element {
    position: relative;
    left: 0;
    top: 0;
    /* apply the animation to the element by calling its name here */
    animation-name: jump;
    animation-duration: 3s;
    /* other animation controls */
}
                

What we did in the above @keyframes is we controlled the movement of the element along the x-axis and along the y-axis using the left and top offset properties. We’ve moved the element by 400px to the right, and had it move 200px upwards halfway through (at 50%), before it moved back down at the end of the animation.

The following is the live demo of the above animation, showing the difference between the element being animated like this, and it being transitioned using a CSS transition:

View this demo on the Codrops Playground

You can also take it further and have the element move in a full triangle path, thus making it move back to its initial position at the end of the animation:

@keyframes jump {
    0%, 100% {
        left: 0; top: 0;
    }
    33% {
        left: 200px; top: -200px;
    }
    66% {
        left: 400px; top: 0;
    }
}
                

You can also specify a set of keyframes without a ‘0%’ keyframe selector. If a ‘0%’ or from keyframe is not specified, then the user agent constructs a ‘0%’ keyframe using the computed values of the properties being animated. If a ‘100%’ or to keyframe is not specified, then the user agent constructs a ‘100%’ keyframe using the computed values of the properties being animated. If a keyframe selector specifies negative percentage values or values higher than 100%, then the keyframe will be ignored.

The keyframe declaration block for a keyframe rule consists of properties and values, as we have seen, that you want to animate. But, not all properties in CSS are animatable. If a non-animatable property is included in a keyframe rule, the property should be ignored (please see notes section below), with the exception of the animation-timing-function property, which is not animatable, but will not be ignored, because it can be used inside a keyframe rule to specify the easing function used to animate the properties as they move to the next keyframe. For example:

@keyframes bounce {
  from {
    top: 100px;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}
                

In the above example, five keyframes are specified for the animation named “bounce”. Between the first and second keyframe (i.e., between ‘0%’ and ‘25%’) an ease-out timing function is used. Between the second and third keyframe (i.e., between ‘25%’ and ‘50%’) an ease-in timing function is used. And so on. The effect will appear as an element that moves up the page 50px, slowing down as it reaches its highest point then speeding up as it falls back to 150px. The second half of the animation behaves in a similar manner, but only moves the element 25px up the page. This animation results in a bouncing effect that can be used to simulate a bouncing ball animation. The following is a live demo using the above animation:

View this demo on the Codrops Playground

A timing function specified on the to or ‘100%’ keyframe is ignored. See the animation-timing-function property entry for more about animation easing functions.

The @keyframes rule that is used by an animation will be the last one encountered in sorted rules order that matches the name of the animation specified by the animation-name property. @keyframes rules do not cascade; therefore, an animation will never derive keyframes from more than one @keyframes rule.

To determine the set of keyframes, all of the values in the selectors are sorted in increasing order by time. If there are any duplicates (for example if you write two ‘50%’ keyframe rules and declaration blocks), then the last keyframe specified inside the @keyframes rule will be used to provide the keyframe information for that time. There is no cascading within a @keyframes rule if multiple keyframes specify the same keyframe selector values.

For example, in the following code snippet, only the second ‘30%’ keyframe rule will be used and hence only the styles provided in its declaration block will be applied. The styles provided in the first ‘30%’ keyframe will not be used.

@keyframes my-animation {
    from {
        /* styles here */
    }
    30% {
        /* 30% styles here */
    }
    30% {
        /* other 30% styles here */
    }
    to {
        /* end styles here */
    }
}
                

If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist. Conceptually, it is as if a set of keyframes is constructed for each property that is present in any of the keyframes, and an animation is run independently for each property.

For example:

@keyframes an-animation {
    from {
        left: 0;
        background-color: red;
    }
    30%, 48% {
        left: 240px;
    }
    60%, 85% {
        background-color: purple;
    }
    to {
        left: 500px;
        background-color: #009966;
    }
}
                

The background-color property is missing from the ‘30%’ and ‘48%’ keyframes, and the left property is missing from the ‘60%’ and ‘85%’ keyframes. Hence, the background-color property is animated using the ‘0%’ (from), ‘60%’, ‘85%’, and ‘100%’ (to) keyframes, and the left property is animated using the ‘0%’, ‘30%’, ‘48%’, and ‘100%’ keyframes.

A property must be specified at least in both the ‘0%’ and ‘100%’ keyframes in order to be animated. Only properties that are specified in both the ‘0%’ and ‘100%’ keyframes will be animated; any property not included in both of those keyframes will retain its starting value for the duration of the animation sequence.

Trivia & Notes

Even though properties that are not animatable should be ignored as per the specification, browser behavior in this regard is non-consistent. Some properties that are stated as not animatable are still animated in some browsers. For example, changing the background image using background-image inside an @keyframes block, the background image is indeed changed and even animated in Chrome, but not in Firefox or IE, for example. The z-index property is an animatable property, but using it inside an @keyframes block you can’t see it animate. Some properties such as the display property, are simply ignored and not applied at all when used inside the @keyframes block. So keep that in mind when you use non-animatable properties in an animation. The specification is still unclear and not very consistent about this at this time. This entry will be updated as soon as it is.

 
@keyframes <user-ident> {
    [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}
                 

@keyframes fall {
    from {
        transform: rotate(0) translateX(0);
        opacity: 1;
    }
    /* ... */
}
                

@keyframes fall {
    from {
        transform: rotate(0) translateX(0);
        opacity: 1;
    }
    /* ... */
    to {
        transform: rotate(90deg) translateX(200px);
        opacity: 0;
    }
}

                

@keyframes fall {
    from {
        transform: rotate(0) translateX(0);
        opacity: 1;
    }
    50%, 60% {
        transform: rotate(90deg) translateX(0);
        opacity: 1;
    }
    to {
        transform: rotate(90deg) translateX(200px);
        opacity: 0;
    }
}
                

@keyframes fall {
    from, 15% {
        transform: rotate(0) translateX(0);
        opacity: 1;
        animation-timing-function: cubic-bezier(.07,2.02,.67,.57);
    }
    50%, 60% {
        transform: rotate(90deg) translateX(0);
        opacity: 1;
        animation-timing-function: cubic-bezier(.13,.84,.82,1);
    }
    85%, to {
        transform: rotate(90deg) translateX(200px);
        opacity: 0;
    }
}