CSS - animation-direction Property
The CSS property animation-direction decides the direction that an animation follows: either forwards, backwards or alternating between these two directions, creating a back and forth movement.
Using the shorthand property animation is a common and simple way to configure all animation properties at once.
Possible Values
normal - The animation progresses in the forward direction with each cycle. When the animation has completed a cycle, it essentially resets to the initial state and starts again. This behavior is the default setting.
reverse - During each cycle, the animation runs backwards. This means that once a cycle has been completed, the animation is reset to its final state and starts again.
The steps of the animation run backwards, including the reversal of easing functions.
alternate - Each cycle of the animation alternately changes direction, starting with the first iteration, which moves forward. The count to distinguish between even and odd cycles starts at one.
alternate-reverse - In each cycle of the animation, the direction changes, starting with the first iteration that moves backwards. The count to differentiate between even and odd cycles starts at one.
Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.
Note: While defining the CSS scroll-driven animations, the value of animation-iteration-count determines the number of times the animation is repeated over the course of timeline's progress. In case no value is specified for animation-iteration-count, the animation is executed only once. infinte is a valid value, but may result in an unworkable animation in case of CSS scroll-driven animation.
Syntax
animation-direction = <single-animation-direction># <single-animation-direction> = normal | reverse | alternate | alternate-reverse
Applies To
All the HTML elements, ::before and ::after pseudo-elements.
CSS animation-direction - normal Value
The following example demonstrates animation-direction with value as normal.
The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value normal is used.
The normal causes the animation to run forward.
<html> <head> <style> /* Centering the content vertically and horizontally */ body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } /* Styling the container for the boxes */ .container { display: flex; justify-content: space-around; align-items: center; } /* Styling for the box with 'normal' animation */ .normal-box { width: 100px; height: 100px; margin: 20px; background-color: #3498db; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: moveNormal; animation-direction: normal; /* Animation moves continuously from start to end */ } /* Keyframes for the 'moveNormal' animation */ @keyframes moveNormal { from { transform: translateX(0); } to { transform: translateX(200px); /* Moves the box horizontally to the right */ } } </style> </head> <body> <div class="container"> <div class="normal-box"></div> <!-- Box with 'normal' animation --> </div> </body> </html>
CSS animation-direction - alternate Value
The following example demonstrates animation-direction with value as alternate.
The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value alternate is used.
The alternate causes the animation to run back and forth.
<html> <head> <style> /* Centering the content vertically and horizontally */ body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } /* Styling the container for the boxes */ .container { display: flex; justify-content: space-around; align-items: center; } /* Styling for the box with 'alternate' animation */ .alternate-box { width: 100px; height: 100px; margin: 20px; background-color: #e74c3c; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: moveAlternate; animation-direction: alternate; /* Animation oscillates back and forth */ } /* Keyframes for the 'moveAlternate' animation */ @keyframes moveAlternate { from { transform: translateX(0); } to { transform: translateX(200px); /* Moves the box back and forth horizontally */ } } </style> </head> <body> <div class="container"> <div class="alternate-box"></div> <!-- Box with 'alternate' animation --> </div> </body> </html>
CSS animation-direction - reverse Value
The following example demonstrates animation-direction with value as reverse.
The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value reverse is used.
The reverse causes the animation to run backwards each cycle.
<html> <head> <style> /* Centering the content vertically and horizontally */ body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } /* Styling the container for the boxes */ .container { display: flex; justify-content: space-around; align-items: center; } /* Styling for the box with 'reverse' animation */ .reverse-box { width: 100px; height: 100px; margin: 20px; background-color: #e74c3c; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: moveReverse; animation-direction: reverse; /* Animation oscillates backwards */ } /* Keyframes for the 'moveReverse' animation */ @keyframes moveReverse { from { transform: translateX(0); } to { transform: translateX(200px); /* Moves the box back and forth horizontally */ } } </style> </head> <body> <div class="container"> <div class="reverse-box"></div> <!-- Box with 'reverse' animation --> </div> </body> </html>
CSS animation-direction - alternate-reverse Value
The following example demonstrates animation-direction with value as alternate-reverse.
The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value alternate-reverse is used.
The reverse causes the animation to reverse its direction each cycle.
<html> <head> <style> /* Centering the content vertically and horizontally */ body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } /* Styling the container for the boxes */ .container { display: flex; justify-content: space-around; align-items: center; } /* Styling for the box with 'alternate-reverse' animation */ .alt-reverse-box { width: 100px; height: 100px; margin: 20px; background-color: #e74c3c; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: moveAltReverse; animation-direction: alternate-reverse; /* Animation oscillates backwards and then changes the direction */ } /* Keyframes for the 'moveAltReverse' animation */ @keyframes moveAltReverse { from { transform: translateX(0); } to { transform: translateX(200px); /* Moves the box back and forth horizontally */ } } </style> </head> <body> <div class="container"> <div class="alt-reverse-box"></div> <!-- Box with 'alternate-reverse' animation --> </div> </body> </html>
To Continue Learning Please Login
Login with Google