I usually use animation to achieve animation effects, but I haven’t paid attention to the difference between forwards and both animations in animation-filling-mode. Today, I managed to achieve them myself and finally understood them. Animation – fill – mode attribute can accept none | recently | backwards | to both one of the four values, then make a brief introduction of the effect of each value respectively.

mode The effect
none Do not change the default behavior
forwards Forward when the animation is finished, keep the state of the last frame (the state defined in the last keyframe)
backwards Animation-delay Specifies the period of animation delay for which the element remains in the state defined in frame 1.
both Indicates that both patterns are applied

In HTML there is the following code:

<div class='circle'><div>
Copy the code

CSS properties:

.circle { width: 200px; height: 200px; border-radius: 50%; animation: move 3s linear 2s none; } @keyframes move { 0% { transform: translateX(0); background: #000; } 100% { transform: translateX(300px); background: red; }}Copy the code

The div background color is not set initially, and the animation is delayed for 1s. The animation in the animation – fill – mode attribute set to none respectively | recently | backwards | to both, can get the following effects:

mode The effect
none The div is invisible at first, but after 1s it appears as a black circle and moves 300px to the right. The color of the div changes from black to red, and then disappears again
forwards The div is initially invisible, but after 1s it appears as a black circle and moves to the right, changing color from black to red, and then stays in the end position (the state defined in the last keyframe)
backwards The div starts out as a black circle (as defined in frame 1), moves to the right for 1s, changes color from black to red, and then disappears out of sight
both The div starts out as a black circle (the state defined in the first frame), moves to the right after 1s, changes color from black to red, and then stays in the end position (the state defined in the last keyframe)
The language is rather pale, so giFs have been added
none:
forwards:
backwards:
both:

To sum up, forwards and both look the same if there is no delay. Forwards and both finish the same (stay in the state defined in the last keyframe), both start with forwards (backwards defined in the first frame).