DEV Community

Cover image for Understand Animation fill mode ๐Ÿคฏ๐Ÿคช
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on • Updated 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)