Animation Direction
Controls whether the animation plays forward, backward, or alternates. alternate creates smooth ping-pong effects without needing to mirror keyframes.
CSS
Intermediate
4 min read
animation-direction Property
Example
.forward { animation-direction: normal; } /* 0→100% */
.reverse { animation-direction: reverse; } /* 100→0% */
.ping-pong { animation-direction: alternate; } /* 0→100→0 */
.alt-rev { animation-direction: alternate-reverse; } /* 100→0→100 */
@keyframes glow {
from { box-shadow: 0 0 5px #007bff; }
to { box-shadow: 0 0 20px #007bff; }
}
.glowing {
animation: glow 1.5s ease-in-out infinite alternate;
} Pro Tip
alternate direction creates ping-pong animations that look smooth without duplicating keyframes in reverse.