Animation direction

I never fully understood the values of animation-direction, the property that tells the animation in which direction to play. It’s difficult to differentiate between normal, reverse, alternate, and alternate-reverse without a visual reference. I created the animation above to show all the values of animation-direction.

See the Pen Animation Direction by Katy DeCorah (@katydecorah) on CodePen

Each set of dots performs the same animation, but in a different direction. You can see the animation run infinitely on CodePen.

Read more about animation-direction