Suppose there is a box, HTML:

<p class="box"></p>

The CSS is as follows:

.box{
    transform: translateY(0);
}
.box.on{
    animation: move 1s;
}

@keyframes move{
    from{transform: translateY(-50px)}
    to  {transform: translateY( 50px)}
}

Use pictures to represent the relationship between the value of translateY and time:

• The horizontal axis represents time. When it is 0, it represents the time when the animation starts, that is, the time when the on class name is added to the box. One cell on the horizontal axis represents 0.5s

• The vertical axis represents the value of translateY. When it is 0, it means the value of translateY is 0. One grid on the vertical axis represents 50px

1. animation-fill-mode: none
   

2. animation-fill-mode: backwards
   

3. animation-fill-mode: forwards
   

4. animation-fill-mode: both
   

In layman’s terms, it refers to the state that remains after the animation ends.

1. none means not to set the state after the end. By default, it returns to the same as the initial state.

2. forwards means setting the animated element to the state when the entire animation ends.

3. backwards Explicitly set the animation to return to the initial state after it ends.

4. both means setting to the end or start state. Usually it returns to the default state.

The remaining ones separated by commas are to configure multiple ones. Write a few demos and try them out and you will understand.