/

HTML / CSS / JavaScript Tutorial

CSS Property: animation-fill-mode

[this page | pdf | back links]

The CSS (CSS3) animation-fill-mode property specifies the style (for an element involved in an animation) that the element takes when the animation is not playing (i.e. when it is finished, or when it has a delay) defines how many seconds an animation should take to complete one cycle, defined in seconds (s) or milliseconds (ms).

 

Valid property values (other than inherit and initial) are:

 

Value

Description

backwards

Before start (i.e. during any delay) will apply property values applicable at the start of the time the animation is running

both

Will follow both the forwards and backwards rules

forwards

After animation is ended will apply property values applicable at the end of the time the animation is running

none

(default value). Will not apply any styles before or after animation is executing

 

Default Value:

none

JavaScript syntax:

e.g. object.style.animationFillMode = "forwards";

Inherited:

No

Animatable:

No

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 100px; height: 40px; position: relative; 
  background: yellow; animation: anim 2s;}
div.x1 {animation-fill-mode: forwards;}
@keyframes anim {from {left: 0px} to {left: 50px;} } 
</style>
</head>
<body>
1. Element set using in-file HTML style<br>
<div class="x1">&nbsp;</div><br><br>
2. Element set using JavaScript<br>
<div id="x2">&nbsp;</div>

<script>
document.getElementById("x2").style.animationFillMode = "backwards";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyAnimationFillMode() {
  var x = document.createElement("DIV"); x.style.animationFillMode = "forwards"; return (window.getComputedStyle(x, null).animationFillMode == "forwards");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile