animation-fill-mode: backwards; and animation-fill-mode: both

Question

One can attribute animation-fill-mode: backwards;
And animation-fill-mode: both; Explain to me?

Answer 1

Hadital

animation-fill-mode is used to determine when the value remains! For example:

There's a square. You set the margin-left to 50%, then assign an animation to move it from margin-left 0% to margin-left 100%! The animation-delay is 2s (2 seconds) and animation-duration 2s!

What will happen?
The square will stay in the middle first.
After 2 seconds, it will go from left to right for 2 seconds!
After that, it will go back to the middle.

As you can see, the default attributes remain after and before the animation occurs!

Now, if you set animation-direction to backwards, the square will be on the left, wait for 2s, then go to the right, then go to its default position - the middle!

If you set it to forwards, however, the square will be on the middle, then after 2s will go to the left and go to right! After the animation stops playing, it would still be on the right!

Both is like the combination of forwards and backwards! It will start from left, then go right, and remain right!

Hapoy programming! :)

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode