CSS animation-name

CSS property animation-name defines a list of animations that apply to an element. Each name is used to select the keyframe at-rule that provides the property values for the animation. Note that animation-duration must also be specified for animation to take effect.

CSS property animation-name

CSS version:	CSS 3
Value:	single-animation-name [ ‘,’ single-animation-name ]*
Initial:	none
Applies to:	all elements, ::before and ::after pseudo-elements
Inherited:	no

Example – animation-name

In the following code, CSS property animation-name can be changed to the following values

left-to-right
rotate-element

<style>
@keyframes left-to-right {
  0% {left:0;}
  100% {left:200px;}
}
@keyframes rotate-element {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
.box {
  position: fixed;
  background-color:lightgreen;
  animation-name: left-to-right;
  animation-duration: 4s;
  animation-iteration-count:infinite;
}
</style>

<div class=box>Object</div>

animation-name refresh

try it online

Example – multiple animation-name

Note the multiple values of animation-name and animation-duration here.

<style>
@keyframes left-to-right {
  0% {left:0;}
  100% {left:200px;}
}
@keyframes rotate-element {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
.box {
  position: fixed;
  background-color:lightgreen;
  animation-name: left-to-right, rotate-element;
  animation-duration: 4s, 2s;
  animation-timing-function: linear;
  animation-iteration-count:infinite;
}
</style>

<div class=box>Object</div>

refresh