animation-fill-mode: value; object.style.animationFillMode = "value"; <'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.
<!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>
<!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>
<!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>
<!doctype html>
<html>
<head>
<style>
@keyframes mykeyframes
{
0%
{
margin-left: 0;
}
100%
{
margin-left: 200px;
}
}
p
{
animation-duration: 4s;
animation-name: mykeyframes;
}
</style>
</head>
<body>
<button>initial</button>
<button>backwards</button>
<button>both</button>
<button>forwards</button>
<button>none</button>
<p>animation-fill-mode</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.animationFillMode = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>