animation-name

Defines a comma-separated list of animations to apply to the given selector.

Syntax

animation-name: <value>;

where <value> is a @keyframes rule, which contains the properties that will be animated.

div {
animation-name: fade;
}
@keyframes fade {
/* properties: values; */
}

Example 1

Give the animation-name a value of disappear:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-duration: 2s;
animation-name: disappear;
}
@keyframes disappear {
from {
background-color: blue;
}
to {
background-color: white;
}
}

Example 2

Give the animation-name a second comma-separated value slideleft:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-duration: 4s, 5000ms;
animation-name: fadeoutfadein, slideleft;
}
@keyframes fadeoutfadein {
0% {
background-color: blue;
}
50% {
background-color: white;
}
100% {
background-color: blue;
}
}
@keyframes slideleft {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors