Animation fill mode property (animation-fill-mode)

The animation-fill-mode property controls what styles will be applied to the element when automation cycle ends or is paused. The CSS usually does not affect the animated element until the first keyframe is started, and after the last keyframe was played. The automation-fill-mode property overrides this element.

Syntax:

selector {

}

Values:

Following values are allowed for the animation-fill-mode property:

none; The animation does not apply any styles before or after the execution. This is the default state.
forwards; The CSS applies element’s styling property values once the animation ends (defined by the animation-iteration-count).
backwards; The CSS applies element’s styling property values as defined by the keyframe and during the period defined by the animation-delay. The keyframe definition on the other hand depends on the animation-direction.
both; The CSS will follow the rules of both values, forwards and backward.
initial, inherit

Example

The animation-fill-mode property with none, forwards, backwards and both values example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    position: relative; top:10px; left:1%;
    width: 10%; height: 30px; margin-top:5px;
    background-color: #222;
    animation: animation 3s infinite;
    animation-delay: 1s;
        /* ADD proprietary selectors if needed */
}
#none { animation-fill-mode: none; }
#forw { animation-fill-mode: forwards; }
#back { animation-fill-mode: backwards; }
#both { animation-fill-mode: both; }
@keyframes animation {
    0% { background-color: gray; }
    50% { left: 80%; background-color: #222; }
    }
}
</style>
</head>
  
<body>

<h3>Animation uses all values:</h3>

<div id="none"></div>
<div id="forw"></div>
<div id="back"></div>
<div id="both"></div>
  
<h5>p.s. Rendering may depend on browser.</h5>

</body>
</html>

›› go to examples ››

Animation fill mode property (animation-fill-mode)

Syntax:

Values:

Example

The animation-fill-mode property with none, forwards, backwards and both values example:

Comments

About

Contact

Get Connected