CSS animation-direction: A Practical Guide to normal, reverse, alternate, and alternate-reverse

What animation-direction controls

A CSS animation is defined by keyframes, such as a starting opacity of 0 and an ending opacity of 1. The animation-direction property does not change those keyframes. It changes the order in which the browser reads them during each animation cycle.

That distinction matters. If an animation moves a panel from left to right, reverse does not create a second set of keyframes. It plays the existing sequence from right to left. This can reduce duplication, but only when the reversed motion represents a valid state change.

The default value is normal. With a single iteration, the element travels from the first keyframe to the last. With multiple iterations, each cycle starts from the first keyframe again unless another direction is specified.

The four animation-direction values

normal

normal is the initial value. Consider a notification that fades in and moves upward:

Example: .notice { animation: enter-notice 500ms ease-out 1 normal both; }

In this shorthand, the animation runs once in the normal direction. The both fill mode preserves the relevant start and end styles before and after playback. Direction alone does not determine whether the final state remains visible.

reverse

reverse plays the keyframes backward during every iteration:

Example: .panel-closing { animation: panel-open 400ms ease-in 1 reverse both; }

If panel-open moves a panel from off-screen to its resting position, reverse moves it from the resting position back off-screen. This is useful when the beginning and ending states are true opposites.

It is not always a safe substitute for a separate closing animation. If the opening sequence includes opacity, scale, and a delay that only make sense on entry, reversing it may produce an awkward exit. Test the complete visual state rather than assuming that mathematical reversal equals good interaction design.

alternate

alternate changes direction after each iteration. The first cycle runs forward, the second runs backward, and the pattern continues:

Example: .sync-indicator { animation: pulse 1200ms ease-in-out infinite alternate; }

With keyframes that scale an indicator from 1 to 1.04, alternate creates a smooth outward and inward pulse. It is generally more natural than repeatedly jumping from the enlarged state back to the original state.

Alternate has a visible effect only when the animation repeats. With one iteration, there is no second cycle in which to reverse direction.

alternate-reverse

alternate-reverse also changes direction on each iteration, but its first cycle runs backward. The second cycle runs forward, then the pattern repeats.

Example: .floating-icon { animation: float 900ms ease-in-out infinite alternate-reverse; }

Use this value when the initial visual position should correspond to the last keyframe in the definition. Be careful when naming keyframes. A name such as float-up may suggest that the first movement is upward, while alternate-reverse begins by reading the sequence in the opposite direction.

How iteration count changes the result

Direction and iteration count must be evaluated together. The iteration count determines how many cycles the browser plays. Direction determines the order within those cycles.

• One normal iteration: first keyframe to last keyframe.
• One reverse iteration: last keyframe to first keyframe.
• Two alternate iterations: forward, then backward.
• Two alternate-reverse iterations: backward, then forward.
• Infinite alternate iterations: continuous forward and backward movement.

A common mistake is choosing alternate while leaving the iteration count at 1. The animation will appear to behave like normal because it never reaches a second cycle. Another is using infinite for an effect that should communicate a completed state. Repeated motion can compete with reading, scanning, and decision making.

Animation direction in the shorthand property

The longhand form makes each decision visible:

Example: .card { animation-name: lift; animation-duration: 500ms; animation-timing-function: ease-in-out; animation-iteration-count: 2; animation-direction: alternate; }

The shorthand is shorter, but its order is easier to misread:

Example: .card { animation: lift 500ms ease-in-out 0s 2 alternate both; }

Important shorthand components include the animation name, duration, timing function, delay, iteration count, direction, and fill mode. The browser can parse several values without a fixed order, but a consistent team convention makes reviews and debugging easier.

When behavior is unclear, temporarily expand the shorthand into longhand declarations. This separates direction problems from timing, delay, and fill-mode problems.

A practical sequence for designing the motion

This sequence keeps animation direction subordinate to interaction design. The visual effect follows the state model instead of defining it.

Practical examples and common pitfalls

A looping activity indicator

A rotating indicator normally uses normal with an infinite iteration count because the angle should continue in one direction:

Example: .loader { animation: rotate 1400ms linear infinite normal; }

Using alternate would make the indicator rotate forward and then backward. That may be intentional for a pendulum-like effect, but it no longer communicates continuous rotation.

A card that lifts on interaction

For a repeated demonstration effect, alternate can create a controlled rise and return:

Example: .feature-card { animation: lift 800ms ease-in-out infinite alternate; }

For a normal hover response, however, a transition is often simpler than an infinite animation. The card should lift while the pointer or focus state is active and return when that state ends. An animation that continues after the user has moved on creates unnecessary motion and weakens the relationship between action and response.

A panel opening and closing

A hypothetical dashboard panel may use one keyframe sequence for opening and reverse playback for closing. That approach works when the panel has stable start and end states. It becomes unreliable if the panel can be interrupted halfway through, because a new animation may begin from the declared keyframe rather than the element’s current rendered position.

In that case, test interruption explicitly. You may need separate state classes, a transition, or a more deliberate animation strategy rather than adding another direction value.

Debugging animation-direction

When an animation appears to jump, move the wrong way, or ignore alternate playback, inspect the full combination of properties:

For accessibility, consider a reduced-motion media query for nonessential movement. Direction does not make a distracting animation accessible by itself. A calmer or disabled animation may be the correct behavior for users who request less motion.

Use motion to clarify, not decorate

HubSpot-style interface polish is better understood as consistency and clarity than as a particular animation recipe. A motion effect should help a user understand what changed, where attention belongs, or whether a process is still active.

The same principle applies to broader digital systems. Tools and visual effects are useful only after the underlying state, ownership, and decision logic are clear. If a loading indicator does not correspond to a real process, or if a panel has no reliable open and closed state, changing animation-direction will not solve the underlying design problem.

For teams managing HubSpot workflows, CRM states, automation, and reporting alongside a customer-facing interface, HubSpot consulting can help connect the interaction layer to a clearer operating process. If the wider issue involves pipeline stages, ownership, or data handoffs, CRM consulting may be the more relevant starting point.