The animation-fill-mode property specifies the style to be applied to the element when the animation does not play (there are two situations when the animation does not play : when the animation does not play after the completion of the animation , or when the animation has a set delay time and does not start playing ).
By default, CSS animation will not affect the element until the first key frame is played, and it will stop affecting the element after the last key frame is completed . The animation-fill-mode property can override this behavior.
Optional values for attributes:
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
- The default value of none . The animation will not apply any styles in the animation to the target element before and after the animation is executed.
- After forwards the animation ends (determined by the animation-iteration-count animation times), the element will apply the attribute value at the end of the animation.
The animation stops after running twice, and the element applies a green background and rounded borders. - The backwards animation will apply the property values defined in the key frame of the first iteration of the animation-delay defined period to start the animation.
(1) Apply the value in the from keyframe when it is not playing (when the animation-direction is "normal" or "alternate")
(2) Apply the value in the to keyframe when it is not playing (when the animation-direction is "reverse" Or "alternate-reverse").
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body{position: relative;} */
div{
width: 100px;
height: 100px;
background: red;
position: relative;
margin: 10px 0px;
}
/* 不同的animation-direction */
.box1{
animation:test 4s 3s backwards 2 normal;}
.box2{
animation:test 4s 3s backwards 2 alternate;}
.box3{
animation:test 4s 3s backwards 2 reverse;}
.box4{
animation:test 4s 3s backwards 2 alternate-reverse;}
@keyframes test{
0%{
left: 0px;background: yellow;}
100%{
left: 300px; background: green;}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
(The animation below shows the result of the operation, starting with two yellow boxes and two green boxes)
When not playing within the delay time, the first two boxes apply the style from from; the latter two boxes apply the style from to (Left: 300px; and the background color is green.)
- Both animations follow the rules of forwards and backwards. In other words, the animation will extend the animation properties in two directions. (When setting a delay, the animation uses the from or to style in the animation before the animation starts, and the final style is also used after the animation ends.)
- initial set this attribute to its default value.
- inherit inherits this attribute from the parent element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body{position: relative;} */
div{
width: 100px;
height: 100px;
background: red;
position: relative;
margin: 10px 0px;
}
/* animation-fill-mode*/
.box1{
animation: test 4s 3s infinite;}
.box2{
animation: test 4s 3s backwards infinite;}
.box3{
animation: test 4s 2s forwards 2;}
.box4{
animation: test 4s 2s both;} /*both:backwards和forwards同时生效 */
@keyframes test{
0%{
left: 0px;background: yellow;}
100%{
left: 300px; background: green;}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
Observation results: (start observation when the colors of the four boxes are red, yellow, red, yellow)
(1) Both box1 and box2 are set to delay, but box2 changes from a red background to a yellow background before the animation is executed, and the yellow background is Set in 0%, you can experience the difference between the default value and backwards.
(2) The box3 (set forwards) animation is executed 3 times and ends with the style when the animation is 100% applied. It stops at a position shifted 300px to the left and the color changes to green.
(3) Box4 uses both, which has both forwards and backwards characteristics . 0% of the attributes are applied when the delay is not played, and 100% of the attributes are applied after the end.
Simply put, the style in the animation is not applied to the element before and after the animation starts by default, but we can extend the animation style to before the animation is actually executed and after the animation is executed by setting backwards and forwards. Both expand (both).