CSS @keyframes Rule

❮ Prev Next ❯

The @keyframes at-rule is the basis for keyframe animations used to animate (gradually change from one style to another) many CSS properties. This rule allows specifying what should happen at specific moments during the animation by defining styles for keyframes (or waypoints) along the animation sequence.

The @keyframes is one of the CSS3 properties.

The @keyframes rule and its identifier are followed by a rule sets (i.e. style rules with selectors and declaration blocks, as in normal CSS code) delimited by curly braces.

The keyframes in the animation sequence

In curly braces, keyframe selectors are put, which define keyframes in the animation sequence when the styles should be changed. During the animation sequence, the set of CSS styles can be changed many times.

The keyframe selector

The keyframe declaration block includes CSS properties and their values. The keyframe selector can start with a percentage (%) or with the keywords "from" (same as 0%) and "to" (same as 100%). 0% is a starting point of the animation, 100% is the endpoint.

The acceptable prefixes

The @keyframes rule is fully supported by major browsers. However, for some prefixes are used:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-o- Opera 12.0

Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

The @keyframes as a keyword

The @keyframes rule consists of a keyword "@keyframes" followed by an identifier (chosen by the developer), which defines the animation. To bind the animation to a certain element this identifier is referred to as a value for the animation-name property.

This is how it looks like:

/* 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 …;
}

Example of the @keyframes rule with the background-color property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 50px;
        animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
        0% {
          background-color: #8ebf42
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #cccccc;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>

Try it Yourself »

In this example, we animate the background-color property. First, we set an identifier for the animation - bouncing. Then we set keyframe selectors - 0%, 50%, and 100% and define values for the property - green, blue and grey. It means that the background color at the starting point (0%) will be light green until it reaches another keyframe (50%). In the middle of the animation sequence, the background will turn to light blue (from 50%-100%), and at the endpoint (100%) it will be grey.

Example of the @keyframes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        height: 100px;
        background: red;
        border-radius: 50%;
        position: relative;
        -webkit-animation: element 4s infinite;
        animation: element 4s infinite;
      }
      @-webkit-keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
      @keyframes element {
        0% {
          top: 0px;
          background: #1c87c9;
          width: 100px;
        }
        100% {
          top: 200px;
          background: #8ebf42;
          width: 150px;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes rule example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of using the @keyframes to make a falling image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 90%;
      }
      .container {
        margin: 30px auto;
        min-width: 320px;
        max-width: 600px;
        height: 90%;
        overflow: hidden;
      }
      img {
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        -webkit-animation: fall 5s infinite;
        animation: fall 5s infinite;
      }
      @-webkit-keyframes fall {
        from {
          -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          -webkit-transform: rotate(90deg) translateX(200px);
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
      @keyframes fall {
        from {
          -webkit-transform: rotate(0) translateX(0);
          transform: rotate(0) translateX(0);
          opacity: 1;
        }
        to {
          -webkit-transform: rotate(90deg) translateX(200px);
          transform: rotate(90deg) translateX(200px);
          opacity: 0.1;
        }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="container">
      <img src="/build/images/w3docs-logo-black.png" alt="W3docs" width="150" height="50" />
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
animationname	Specifies the name of the animation. This value is required.
keyframes-selector	Specifies the percentage of the animation duration. Values are: 0-100% from (same as 0%) to (same as 100%) This value is required.
css-styles	CSS style properties. This value is required.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.