CodeNewbie Community 🌱

Cover image for Understand Animation fill mode 🀯πŸ€ͺ
Atul Prajapati
Atul Prajapati

Posted on

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".

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.

Top comments (0)