The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: forwards;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: forwards</h1>
<p>Let the div element retain the style values from the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>