Animation direction
The route through a loop: forward, backward, or ping-ponging between the two so it returns without a jump.
See it
What it is
Animation direction chooses which way each CSS animation iteration plays. 'normal' runs from the first keyframe to the last, 'reverse' runs the sequence backward, 'alternate' switches direction after each pass, and 'alternate-reverse' does the same but starts backward.
Use alternating direction when a loop should travel out and return without a visible jump, such as a floating shape or a breathing scale. Use 'reverse' when the same keyframes describe a clean exit as well as an entrance and maintaining a second sequence would only duplicate the motion.
Gotcha: reversing also reverses the timing curve. An ease-in played backward behaves like an ease-out, which can be exactly right or an unexpected change in feel. With alternating motion, the number of iterations also decides which end pose finishes last, so check it before relying on 'animation-fill-mode: forwards'.
Ask AI for it
Make this floating shape travel out and back with one CSS @keyframes sequence. Animate from 'transform: translateY(0)' to 'transform: translateY(-12px)', set 'animation-direction: alternate', 'animation-iteration-count: infinite', 'animation-duration: 1.8s', and 'animation-timing-function: ease-in-out'. Under 'prefers-reduced-motion: reduce', remove the animation and leave the shape at its neutral transform.