
The CSS animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
Demo:
Syntax:
animation-direction: normal|reverse|alternate|alternate-reverse;
normal (default) – the animation is played as normal (forwards).
reverse – the animation is played in the reverse direction (backwards).
alternate – the animation is played forwards first, then backwards.
alternate-reverse – the animation is played backwards first, then forwards.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background: #2a9d8f;
position: relative;
animation: move 4s infinite;
animation-direction: reverse;
}
@keyframes move {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Output:
Enjoy coding!
Read also:
How to use CSS steps() Function ?/ CSS typing effect
CSS animation-play-state Property