The animation-delay property
The animation-delay property sets
a delay before an animation starts.
Syntax
selector {
animation-delay: time 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, there will be the delay
of 3 seconds before
an animation starts:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-delay: 3s;
animation-duration: 6s;
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-durationproperty
that sets an animation duration -
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
