CSS animation-fill-mode Property
The animation-fill-mode property sets a style to the element when the animation is not executing (before it starts, after it ends, or both).
The animation-fill-mode is one of the CSS3 properties.
The animation-fill-mode property is the only property that affects the element before the first @keyframe is played or after the last keyframe is played. It can assume the following values: "forwards" to specify that the element should keep the style values set by the last keyframe (depending on animation-iteration-count and animation-direction properties); "backwards" to specify that the element should get the style values set by the first keyframe (depends on animation-direction) and keep it within animation-delay period; "both" to specify that the animation should follow the rules for both "forwards" and "backwards", and "none" (default) to specify that no styles will be applied to the element before or after the animation is executed.
When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.
| Initial Value | none |
| Applies to | All elements, It also applies to ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.animationFillMode = "forwards"; |
Syntax¶
animation-fill-mode: none | forwards | backwards | both | initial | inherit;Example of the animation-fill-mode property with the "forwards" value:¶
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
-webkit-animation: element 5s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation: element 5s;
animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: blue;
}
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Example of the animation-fill-mode property with the "backwards" value:¶
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
-webkit-animation: element 5s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: backwords;
/* Safari 4.0 - 8.0 */
animation: element 5s;
animation-fill-mode: backwords;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: blue;
}
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Values¶
| Value | Description |
|---|---|
| none | This is the default value. Animation will not apply any style to the element before and after it starts. |
| forwards | Specifies that the element should keep the style values set by the last keyframe. |
| backwords | Specifies that the element should get the style values set by the first keyframe and keep it within animation-delay period. |
| both | Specifies that the animation should follow the rules for both forwards and backwards. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |
0 Comments
CAN FEEDBACK
Emoji