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

#beginners #css #html #tutorial

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.