/

HTML / CSS / JavaScript Tutorial

CSS Property: animation-direction

[this page | pdf | back links]

The CSS (CSS3) animation-direction property defines whether an animation should play in forward, reverse or alternating directions.

 

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

 

Value

Description

alternate

Will play in forward direction every odd time and reverse direction every even time

alternate-reverse

Will play in reverse direction every odd time and forward direction every even time

normal

(default value). Will play in forward direction

reverse

Will play in reverse direction

 

Default Value:

normal

JavaScript syntax:

e.g. object.style.animationDirection = "reverse"

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 infinite;}
div.x1 {animation-direction: alternate;}
@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.animationDirection = "alternate";
</script>

</body>
</html>

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


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile