CSS @keyframes Rule

The @keyframes rule specifies steps (waypoints) in an animation sequence.

Each step has a different style associated with it.

Animation sequences start at 0% (from) and end at 100% (to).



An animation using the @keyframes rule.
The from and to keywords mark the start and end of the sequence.

  .block {
    background-color: steelblue;
    width: 90px;
    height: 90px;
    animation-name: movingAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  @keyframes movingAnimation {
    from { transform: none; }
    to { transform: translateX(250%); }

<div class="block"></div>  

Using @keyframes

Two keywords from and to mark the start and end points.

Alternatively, use 0% (from) and 100% (to), and any other % in between (see below).


@keyframes animation-name {
    keyframes-selector { css-styles; }



Value Description
animation-name Required. Defines the name of the animation.
keyframes-selector Required. Percentage of the animation duration.
Legal values:
from (same as 0%)
to (same as 100%)
css-styles Required. One or more legal CSS style properties

More Examples

A 5-step @keyframes sequence.
The element changes position and color during these steps.

  .animation-example {
    width: 100px;
    height: 100px;
    background-color: aliceblue;
    position: relative;
    animation-name: bgPositionAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  @keyframes bgPositionAnimation {
     0% { background-color: lightblue; left: 0px; top: 0px; }
    25% { background-color: orangered; left: 200px; top: 0px; }
    50% { background-color: yellow; left: 200px; top: 200px; }
    75% { background-color: teal; left: 0px; top: 200px; }
   100% { background-color: lightblue; left: 0px; top: 0px; }

<div class="animation-example"></div>

Browser support

This table shows when @keyframes support started for each browser.

43.0 May 2015
16.0 Oct 2012
10.0 Sep 2012
30.0 Jun 2015
9.0 Sep 2015

You may also like