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"> </div><br><br>
2. Element set using JavaScript<br>
<div id="x2"> </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