Understand Animation fill mode 🤯🤪

Hey coding people

Hope you are doing well in your journey :)

This post is a part of our "20 Days of CSS animation post".

20 Days of CSS animation post💪

🚩 Atul Prajapati 🇮🇳 ・ Jan 30 '21 ・ 1 min read

#css #html #beginners

The "animation-fill-mode" is used to set the animation ending position of an element I mean @keywords to position OR default element position. But keep in mind we can't set @keyframes from position via animation fill mode.

Please play around with this codepen, So you can feel the difference.

The use of "none" is nothing, no fill effect.

animation-fill-mode: none;

The "forwards" and "both" mode will set the element at keyframes to position.

animation-fill-mode: forwards;

The "backwards" mode will set the element at the default element position.

That's all for this post And if you are interested to learn CSS you can join E-Learning platform.