The animation-duration property
The animation-duration property sets
an animation duration.
Syntax
selector {
animation-duration: duration in s or ms;
}
Values
| Value | Description |
|---|---|
s |
Specifies a time in seconds (e.g. 3s). |
ms |
Specifies a time in milliseconds (e.g. 3ms). One second is 1000 milliseconds. |
Default value: 0s.
Example
In this example, the animation will
play for 3 seconds:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 400px;
}
}
#elem {
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
See also
-
the
animation-nameproperty
that sets an animation name -
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
@keyframescommand
that set keyframes for an animation -
a smooth
transition, representing an animation when hovering over an element
