The animation-fill-mode property
The animation-fill-mode property sets
where an animation stops after it finishes. By
default, the animation returns to its original
value, which may not look very nice.
Syntax
selector {
animation-fill-mode: backwards | forwards | both | none;
}
Values
| Value | Description |
|---|---|
none |
If an animation delay is set, the element will
remain in place during the delay time, and then
jump to the 0% frame. After the animation
ends, the element will not remain in the state
where it stopped, but will jump to the initial
state.
|
backwards |
Makes the element move after the page loads to
the 0% frame, even if a
animation-delay is set, and stay there until the
animation starts. After the animation ends,
the element will not stay in the state where
it stopped, but will jump to the starting state.
|
forwards |
Tells the browser that after the animation ends, the element will remain in the state where it stopped. |
both |
Includes backwards and forwards - after the page
loads, the element will be set to 0% frame,
and after the animation ends, the element will
remain where it stopped.
|
Default value: none.
Example . The none value
In this example,
margin-left
is set to 300px for the element, and 0px
for the first frame of the animation. Since there
is no
animation-delay,
the element will become 0px after the page loads,
not 300px. In addition, the animation will jump
back to the starting value after it finishes:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Example . The none value
In this example,
margin-left
is set to 300px for the element, and 0px
for the first frame of the animation. Also, the
element has
animation-delay
of 3 seconds, so after the page loads, the
element will be at 300px, not at 0px,
and will stand there for 3 seconds after
the animation starts, and then it will jump to
0px - and the animation will start from
there. In addition, the animation will jump to
the initial value after it finishes:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Example . The backwards value
In this example,
margin-left
is set to 300px for the element, and
0px for the first frame of the
animation. Also, the element has
animation-fill-mode set to
backwards, so the element will be at
0px after the page loads, rather than
at 300px as it was for
animation-fill-mode set to none. Also,
the animation will jump back to its starting
value after it finishes:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: backwards;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Example . The value is none and the number of repetitions is 1
In this example,
margin-left
is set to 300px for the element, and 0px
for the first frame of the animation. Also, the element has
animation-delay
of 3 seconds, so after the page loads, the
element will be at 300px, not at 0px,
and will stay there for 3 seconds after the
animation starts, and then it will jump to 0px
- and the animation will start from there. Since
animation-fill-mode is set to none, after
the animation plays, the element will return to
its initial value:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Example . The value is forwards and the number of repetitions is 1
In this example, animation-fill-mode is
set to forwards, and
animation iteration count
is set to 1. After the animation plays,
the element will remain in the position where
the animation ended, rather than jumping to
the starting point.
Additionally, the margin-left is set to
300px on the element, and the first frame
of the animation is set to 0px. The
element also has an animation-delay of
3 seconds, so the element will be at
300px after the page loads, not
0px, and will stay there for 3
seconds after the animation starts, and then
jump to 0px - and the animation will
start from there:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: forwards;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Example . The value is both and the number of repetitions is 1
In this example, animation-fill-mode is
set to both, and
animation iteration count
is set to 1. After the page loads, the
element will be at the first frame of the
animation (at 0px, not 300px),
and after the animation plays, the element
will remain in the position where the
animation ended, rather than jumping to
the starting point:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
margin-left: 300px;
animation-fill-mode: both;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
See also
-
the
animation-nameproperty
that specifies an animation name -
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-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
