CSS @keyframes Rule

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

Meaning

The @keyframes rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

This gives more control over the intermediate steps of the animation sequence than transitions.

To use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. Each @keyframes rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.

Standard Syntax

@keyframes animation-name {
  keyframes-selector {
    property: value;
  }
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Property Values

The following table describes the values of this property.

More Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-iteration-count: infinite;
  animation-name: demo;
  animation-duration: 2s;
}

@keyframes demo {
  from {left: 0%;}
  to {left: 50%;}
}