CodeNewbie Community

loading...
Cover image for Understand Animation fill mode 🤯🤪

Understand Animation fill mode 🤯🤪

Atul Prajapati
HTML, CSS, Bootstrap, JavaScript, XML, PHP, ajax, react js, wordpress, magento, Shopify, Photoshop, camtasia, SEO & learning new skills every moment 👨🏼‍💻
・1 min read

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.

Discussion (0)