CSS @keyframes Rule

❮ Previous Reference Next ❯


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


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.


Property Values

The following table describes the values of this property.

Value Description
animation-name A name identifying the keyframe list. This must match the identifier production in CSS syntax.
  • from: A starting offset of 0%.
  • to: An ending offset of 100%.
percentage or length A percentage or length of the time through the animation sequence at which the specified keyframe should occur.

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%;}
❮ Previous Reference Next ❯