animation-fill-mode
The animation-fill-mode CSS property defines what values are applied by the animation outside the time it is executing.
CSS
animation-fill-mode: value;
JS
object.style.animationFillMode = "value";
Values
<'animation-fill-mode'> = <single-animation-fill-mode>#
<single-animation-fill-mode> = none | forwards | backwards | both
none
The animation has no effect when it is applied but not executing.
forwards
After the animation ends, the animation will apply the property values for the time the animation ended.
backwards
During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation.
both
The effects of both forwards and backwards fill apply.
Initial
backwards
both
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-duration: 4s;
animation-fill-mode: both;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<p>both</p>
</body>
</html>
forwards
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-duration: 4s;
animation-fill-mode: forwards;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<p>forwards</p>
</body>
</html>
none
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-duration: 4s;
animation-fill-mode: none;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<p>none</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
p {
animation-duration: 4s;
animation-name: mykeyframes;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.animationFillMode = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="backwards">
<input onmouseover="mouseover(value)" type="button" value="both">
<input onmouseover="mouseover(value)" type="button" value="forwards">
<input onmouseover="mouseover(value)" type="button" value="none">
<p>animation-fill-mode</p>
</body>
</html>
Internal
External