CSS @keyframes Rule

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 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.

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 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 @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 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

<!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: #ccc; }
      }
    </style>
  </head>
  <body>
    <h2>@keyframes example</h2>
    <div class="element">The background of this text is animated.</div>
  </body>
</html>

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 till it reaches another keyframe (50%), in the middle of animation sequence the background will turn to light blue (from 50%-100%), and at the end point (100%) it will be grey.

Another example with @keyframes:

Example

<!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>

An example where the image is falling using the @keyframes:

Example

<!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="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50"/>
    </div>
  </body>
</html>

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.




Related articles