Animation direction

Animation direction

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

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.

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


Did you enjoy this post? Support Trans Lifeline. Trans Lifeline offers direct emotional and financial support to trans people in crisis.