animation-direction CSS Property

The animation-direction property defines whether the animation should play in reverse on some or all cycles. Initial value is normal.

.box { animation-direction: alternate; }

.pulse { animation: scale 1s ease infinite alternate; }

normalThe default value. All cycles play in normal direction (0% → 100%).

reverseAll cycles play in reverse (100% → 0%).

alternateAlternates — odd cycles normal, even cycles reversed.

alternate-reverseAlternates, starts reversed — odd cycles reversed, even cycles normal.

CSS Animations Level 1

Editor's Draft

CSS

Show all code