Abakada: Back to Basics > Language References > CSS Properties > At-Rules > CSS At-Rules: @keyframes

CSS Properties Index   At-Rules Index

---

Controls the steps in a CSS animation sequence.

@keyframes keyframes-name {
   from {
      ... style rule ...
   }
   to {
      ... style rule ...
   }
}

Parameter	Description	Valid Values
keyframes-name	A name identifying the keyframes sequence.	User-defined case-sensitive string used as an identifier.
from	The starting point in the sequence at which the keyframe should begin.	A starting offset of 0% or expresed as a percentage of the total length of the sequence.
to	The end of the sequence at which the keyframe should finish.	An ending offset of 100% or expresed as a percentage of the total length of the sequence.

Keyframes specify the behavior of one cycle of an animation.

Keyframes are specified using the @keyframes at-rule.

For a brief overview, please see Understanding and Using CSS Animations.

CSS Animations