The CSS animation-direction property is used to define how animation should be played which means that your animation can be played forward , backward , or in alternate cycles. This is one of the CSS3 properties.
Its default value is normal. whenever you run the animation, it will reset to the beginning state and start over.
- This property accepts the following values.
- normal
- reverse
- alternate
- alternate-reverse
- initial
- inherit
Animation-direction property characteristics:
| Initial Value |
normal |
| Applies to | All elements, It also applies to ::before and ::after pseudo-elements. |
| Inherited | No |
| Animatable | No |
| Version | CSS3 |
| JavaScript Syntax | object.style.animationDirection = "reverse" |
Syntax:
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
Values:
| Value | Description |
|---|---|
| normal | It is a default value. Whenever you run the animation, it will reset to the beginning state and start over. |
| reverse | With this value, the animation plays backward. Whenever you run the animation, it will reset to the end and start over. |
| alternate | This value first moves the animation forward and then backward. |
| alternate-reverse | At first, the a nimation moves backward , then forwards. |
| initial | It can set the property to its default value. |
| inherit | Inherits the property from its parent element. |
Example of animation-direction property:
Here, we will show you the code using animation-direction with the normal value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards.</p>
<div></div>
</body>
</html>
Result:
By executing the above code, you can get the output as shown in the below image.
Example of animation-direction property with the “reverse” value:
In the following code, we use the animation-direction property with the reverse value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #9D0101;
position: relative;
animation: myfirst 5s 1;
animation-direction: reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #FD8F01;
left: 200px;
top: 0px;
}
50% {
background: #01BA02;
left: 200px;
top: 200px;
}
75% {
background: #01865E;
left: 0px;
top: 200px;
}
100% {
background: #014686;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>In this example the animation plays as reverse.</p>
<div></div>
</body>
</html>
Result:
After running the above code, you will get the result as shown in the below image.
Example of animation-direction property with the “alternate” value:
The following code show you the animation-direction property with the alternate value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #5457C4;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}
@keyframes myfirst {
0% {
background: #7301D0;
left: 0px;
top: 0px;
}
25% {
background:#BF01BD;
left: 200px;
top: 0px;
}
50% {
background: #BF0129;
left: 200px;
top: 200px;
}
75% {
background: #480D19;
left: 0px;
top: 200px;
}
100% {
background: #BABF01;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays first forwards, then backwards.</p>
<div></div>
</body>
</html>
Result:
By running the above code, you can get the output as shown in the below image.
Example of animation-direction property with the “alternate-reverse” value:
In this code, we apply the animation-direction property with the alternate-reverse value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #5457C4;
position: relative;
animation: myfirst 5s 1;
animation-direction: alternate-reverse;
}
@keyframes myfirst {
0% {
background: #7301D0;
left: 0px;
top: 0px;
}
25% {
background: #BF01BD;
left: 200px;
top: 0px;
}
50% {
background: #BF0129;
left: 200px;
top: 200px;
}
75% {
background: #480D19;
left: 0px;
top: 200px;
}
100% {
background: #BABF01;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards, then forwards.</p>
<div></div>
</body>
</html>
Result:
Browser-Support:
Read Ahead:
The post CSS animation-direction property appeared first on Share Point Anchor.
Top comments (0)