animation-name property
The animation-name property specifies
an animation (or animations) name that will
be applied to this element. The animation
name must be the same as that specified
when defining
@keyframes.
Syntax
selector {
animation-name: animation name;
}
Example
In this example the animation
is named move:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
See also
-
the
animation-durationproperty
that sets an animation duration -
the
animation-delayproperty
that sets a delay before an animation -
the
animation-timing-functionproperty
that sets an animation speed -
the
animation-iteration-countproperty
that specifies a number of animation iterations -
the
animation-directionproperty
that sets an animation direction -
the
animation-fill-modeproperty
that sets the animation mode -
the
animation-play-stateproperty
that allows you to pause an animation -
the
animationproperty
that is a shorthand for animation -
the
@keyframesat-rule
that set keyframes for an animation -
a smooth
transition, representing an animation when hovering over an element