CSS animation-fill-mode Property

You are Here:

CSS animation-fill-mode Property

CSS animation-fill-mode property sets how a CSS animation applies styles to its target before and after its execution.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; line-height: 5; text-align: center; border: 1px solid #000; background: #39ac39; -webkit-animation: myAnimation 1s 1; /* Safari 4.0 - 8.0 */ animation: myAnimation 1s 1; -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; background: #39ac39; } #point{ -webkit-animation-fill-mode: none; animation-fill-mode: none; } #point1{ -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #point2{ -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } #point3{ -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes myAnimation { from {border-radius: 0%; background: #f69d3c;} to {border-radius: 50%; background: #0066ff} } @keyframes myAnimation { from {border-radius: 0%; background: #f69d3c;} to {border-radius: 50%; background: #0066ff} } </style> </head> <body> <h1>CSS animation-fill-mode Property</h1> <h2>animation-fill-mode: none;</h2> <div id="point"> div </div> <h2>animation-fill-mode: forwards;</h2> <div id="point1"> div </div> <h2>animation-fill-mode: backwards;</h2> <div id="point2"> div </div> <h2>animation-fill-mode: both;</h2> <div id="point3"> div </div> </body> </html>

Syntax

Using CSS

element{ animation-fill-mode: backwards; }

Using Javascript

object.style.animationFillMode="backwards";

Animatable

No, animation-fill-mode property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS animation-fill-mode property is none.

Property Value

The following table provides a list of values for CSS animation-fill-mode property.

ValueExplanation
noneSpecifies that the animation will not apply any styles to the target when it's not executing.
forwardsSpecifies that the target will retain the computed values set by the last keyframe encountered during execution.
backwardsSpecifies that the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
bothSpecifies that the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Using JavaScript

In the following example, we will demonstrate how to change the CSS animation-fill-mode property of an element using JavaScript.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; line-height: 6; text-align: center; border: 1px solid #000; background: #39ac39; margin-bottom: 20px; } @-webkit-keyframes myAnimation { from {border-radius: 0%; background: #f69d3c;} to {border-radius: 50%; background: #0066ff} } @keyframes myAnimation { from {border-radius: 0%; background: #f69d3c;} to {border-radius: 50%; background: #0066ff} } </style> </head> <body> <h1>CSS animation-fill-mode Property</h1> <div> Div </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.animation = "myAnimation 1s 1"; x.style.WebkitAnimation = "myAnimation 1s 1"; x.style.animationDelay = "1s"; x.style.WebkitAnimationDelay = "1s"; x.style.animationFillMode = "both"; x.style.WebkitAnimationFillMode = "both"; } </script> </body> </html>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author