A CSS animation lets an HTML element gradually change from one style to another, without using JavaScript. Any number of CSS properties can be changed, for any amount of times.

To use CSS animation, some keyframes for the animation must be specified.

@keyframes Rule

Keyframes hold what CSS styles the element will have at certain times. When specifying styles inside the @keyframes rule, the animation will gradually change from the current style(s) to the new style(s).

To get an animation to work, the animation must be bound to an element and the animation-duration should be defined. In this example code, the <h1> element will load as purple and gradually change to yellow over the course of 5 seconds.

/* The animation */
@keyframes color-change {
from {
color: purple;
25% {
color: orange;
50% {
color: red;
75% {
color: blue;
to {
color: yellow;
/* The element */
h1 {
color: purple;
animation-name: color-change;
animation-duration: 5s;


Controls an animation with multiple intermediate steps, defining the values of the properties at each keyframe.
Shorthand property that sets the animations for an element.
Defines when an animation starts.
Determines whether an animation runs forward or in reverse on some or all of its cycles.
Defines how long an animation should take to complete.
Defines what values are applied by an animation outside its execution time.
Defines how many times an animation runs.
Defines a comma-separated list of animations to apply to the given selector.
Defines whether an animation is running or paused.
Defines an acceleration curve for each keyframe in a single animation.
Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy