CSS animation-direction Property
The CSS animation-direction property sets how animation should be played: forwards, backward or in alternate cycles. The default value is normal. Each time you run the animation, it will reset to the beginning state and start over.
When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.
The animation-direction property is one of the CSS3 properties.
| Initial Value | normal |
| Applies to | All elements, It also applies to ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.animationDirection = "reverse" |
Syntax¶
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;Example of the animation-direction property: ¶
<!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>Example of the animation-direction property with the "reverse" value: ¶
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: reverse;
}
@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>In this example the animation plays as reverse.</p>
<div></div>
</body>
</html>Example of the animation-direction property with the "alternate" value: ¶
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}
@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 first forwards, then backwards.</p>
<div></div>
</body>
</html>Example of the animation-direction property with the "alternate-reverse" value:¶
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: alternate-reverse;
}
@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, then forwards.</p>
<div></div>
</body>
</html>Values¶
| Value | Description | |
|---|---|---|
| normal | It is the default value, the animation plays forwards. Each time you run the animation, it will reset to the beginning state and start over. | |
| reverse | The animation plays backwards. Each time you run the animation, it will reset to the end and start over. Timing function is also reversed. | |
| alternate | At first the animation moves forwards, then backwards. | |
| alternate-reverse | At first the animation moves backwards, then forwards. | |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji