The animationDirection property is used to set or return the animation direction. This property will have no effect if the animation is set to place only once.
Syntax:
- It returns the animationDirection Property.
object.style.animationDirection;
- It is used to set the animationDirection Property.
object.style.animationDirection = "normal|reverse|alternate| alternate-reverse|initial|inherit"
Property Value: The animationDirection property values are listed below:
- normal: This property play the animation in forward direction. It is the default value.
- reverse: This animation property play the animation in reverse direction.
- alternate: This animation property play the animation forwards and backwards in alternate order.
- alternate-reverse: This animation property play animation backwards first, and then forwards.
- initial: This property is used to set the animationDirection property to its default value.
- inherit: This property is used to inherits the animationDirection property from its parent element.
Example 1:
Program:
html
<!DOCTYPE html><html>
<head>
<style>
div {
color:green;
font-size:70px;
font-weight:bold;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: animate 3s infinite;
animation: animate 3s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
@keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<button onclick = "myGeeks()">
Click Here!
</button>
<div id = "GFG">
GeeksforGeeks
</div>
<script>
function myGeeks() {
// Code for Chrome, Safari, and Opera
document.getElementById("GFG").style.WebkitAnimationDirection
= "normal";
document.getElementById("GFG").style.animationDirection
= "normal";
}
</script>
</body>
</html>
|
Output:
Example 2:
Program:
html
<!DOCTYPE html><html>
<head>
<style>
div {
color:green;
font-size:70px;
font-weight:bold;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: animate 3s infinite;
animation: animate 3s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
@keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<button onclick = "myGeeks()">
Click Here!
</button>
<div id = "GFG">
GeeksforGeeks
</div>
<script>
function myGeeks() {
// Code for Chrome, Safari, and Opera
document.getElementById("GFG").style.WebkitAnimationDirection
= "reverse";
document.getElementById("GFG").style.animationDirection
= "reverse";
}
</script>
</body>
</html>
|
Output:
Example 3:
Program:
html
<!DOCTYPE html><html>
<head>
<style>
div {
color:green;
font-size:70px;
font-weight:bold;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: animate 3s infinite;
animation: animate 3s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
@keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<button onclick = "myGeeks()">
Click Here!
</button>
<div id = "GFG">
GeeksforGeeks
</div>
<script>
function myGeeks() {
// Code for Chrome, Safari, and Opera
document.getElementById("GFG").style.WebkitAnimationDirection
= "alternate";
document.getElementById("GFG").style.animationDirection
= "alternate";
}
</script>
</body>
</html>
|
Output:
Example 4:
Program:
html
<!DOCTYPE html><html>
<head>
<style>
div {
color:green;
font-size:70px;
font-weight:bold;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: animate 3s infinite;
animation: animate 3s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
@keyframes animate {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<button onclick = "myGeeks()">
Click Here!
</button>
<div id = "GFG">
GeeksforGeeks
</div>
<script>
function myGeeks() {
// Code for Chrome, Safari, and Opera
document.getElementById("GFG").style.WebkitAnimationDirection
= "alternate-reverse";
document.getElementById("GFG").style.animationDirection
= "alternate-reverse";
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by DOM animationDirection property are listed below:
- Google Chrome 43.0 and above
- Edge 12.0 and above
- Firefox 16.0 and above
- Internet Explorer 10.0 and above
- Safari 9.0 and above
- Opera 30.0 and above