Animations

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;
}

Animations

@keyframes
Controls an animation with multiple intermediate steps, defining the values of the properties at each keyframe.
animation
Shorthand property that sets the animations for an element.
animation-delay
Defines when an animation starts.
animation-direction
Determines whether an animation runs forward or in reverse on some or all of its cycles.
animation-duration
Defines how long an animation should take to complete.
animation-fill-mode
Defines what values are applied by an animation outside its execution time.
animation-iteration-count
Defines how many times an animation runs.
animation-name
Defines a comma-separated list of animations to apply to the given selector.
animation-play-state
Defines whether an animation is running or paused.
animation-timing-function
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