The animation-fill-mode attribute specifies whether the animation effect is visible before or after the animation is played.
Note: The attribute value is one or more fill pattern keywords separated by commas.
Syntax
animation-fill-mode : none | forwards | backwards | both;
| Value |
Description |
| none |
Does not change the default behavior. |
| forwards |
When the animation is complete, keep the last property value (defined in the last keyframe). |
| backwards |
During the period of time specified by animation-delay, before the animation is displayed, the start property value (on the first defined in keyframes). |
| both |
Both forward and backward fill modes are applied. |
##Example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}The above is the detailed content of How to use css animation-fill-mode property. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
