In this section, we will learn what the animation-direction property is and how to use it in CSS.
Click here to run the example of animation-direction property.
CSS animation-direction Property Definition and Usage
CSS provided a property called animation-direction by which we can declare whether an animation should be played forwards, backwards or in alternate mode.
CSS animation-direction Property Syntax
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;CSS animation-direction Property Value
The values that we can set for animation-direction property are:
-
normal: This is the default value and when used,
it means the animation should start from the key-frame 0 and play
towards the last key frame. -
reverse: When we use this value, it means the
animation should start its cycle in reverse mode which means at the end
of the animation towards the beginning point. -
alternate: Using this value, animation starts
its cycle in normal (starting from the beginning) then at the end of its
cycle, it will change to reverse mode. -
alternate-reverse: this is the complete opposite
of “alternate” and using this value, animation starts its cycle in
reverse then at the end of its cycle, it will change to normal
mode.
Note: set the iteration of the animation to at least 2 in order to see the effect of alternate and alternate-reverse mode.
Example: animation-direction property in CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
div{
margin: 2em;
}
li{
animation-name:padding;
animation-delay: 1s;
animation-duration:5s;
animation-timing-function: linear;
animation-iteration-count: 2;
display: inline-block;
border:thin solid lightgray;
border-radius: 1em;
margin-left: 0.2em;
padding:0.2em;
}
@keyframes padding{
from{
padding-bottom:0.2em;
}to{
padding-bottom:15em;
}
}
li:nth-child(1){
animation-direction:normal;
}
li:nth-child(2){
animation-direction:reverse;
}
li:nth-child(3){
animation-direction:alternate;
}
li:nth-child(4){
animation-direction: alternate-reverse;
}
</style>
</head>
<body>
<ul>
<li>Animation direction is: Normal</li>
<li>Animation direction is: Reverse</li>
<li>Animation direction is: alternate</li>
<li>Animation direction is: alternate-reverse</li>
</ul>
</body>
</html>