JASMA

What Is the CSS animation-direction Property?

The animation-direction property defines the playback direction of a CSS animation. It works with animations created using @keyframes and affects how each cycle runs. By default, CSS animations play from the first keyframe to the last keyframe. In other words, they move from from or 0% toward to or 100%.

But not every animation should march forward forever like it is late for a meeting. Sometimes you want the animation to play backward. Sometimes you want it to play forward once, then backward on the next loop. Sometimes you want the backward movement first. That is exactly where animation-direction becomes useful.

Basic Syntax

In this example, the element slides from left to right during the first cycle, then right to left during the next cycle. Instead of jumping back to the start, it reverses smoothly. It is the CSS equivalent of remembering where you parked.

The Four Main animation-direction Values

The animation-direction property has four commonly used values: normal, reverse, alternate, and alternate-reverse. Each value changes how the browser reads your keyframes during one or more animation cycles.

1. normal

normal is the default value. The animation plays forward every cycle, from 0% to 100%. When the cycle ends and the animation repeats, it starts again from the beginning.

Use normal when you want a predictable forward motion, such as a progress indicator, a fade-in sequence, or a decorative element that repeats from the same starting point.

2. reverse

reverse plays the animation backward every cycle. The browser begins at the 100% keyframe and moves toward the 0% keyframe. This does not require you to rewrite your keyframes in reverse order, which is excellent news for developers who enjoy having fewer tiny CSS chores.

One important detail: when an animation runs in reverse, the timing function also behaves in reverse. For example, an ease-in curve can feel like ease-out because the animation is being played from the opposite direction.

3. alternate

alternate plays odd-numbered cycles forward and even-numbered cycles backward. The first cycle runs from 0% to 100%, the second cycle runs from 100% to 0%, and the pattern continues.

This value is perfect for animations that should move back and forth naturally: pulsing buttons, floating cards, bouncing arrows, glowing borders, or small interface hints that need motion without looking like they are trapped in a washing machine.

4. alternate-reverse

alternate-reverse is similar to alternate, but the first cycle starts in reverse. The first cycle runs from 100% to 0%, the second cycle runs forward, and the pattern keeps alternating.

This value is helpful when your animation should begin from the final keyframe state but still alternate smoothly afterward. It is especially useful when matching an animation to an existing layout position or visual state.

How animation-direction Works with @keyframes

To understand animation-direction, you need to understand that CSS keyframes are not just visual snapshots. They are a timeline. When you write 0% and 100%, you are telling the browser where the animation starts and where it ends.

With animation-direction: normal, the element fades in and moves upward. With animation-direction: reverse, it starts visible and moves downward while fading out. Nothing in the keyframes changed. Only the direction changed.

This makes animation-direction a powerful tool for reusing animation logic. Instead of creating fade-in and fade-out keyframes separately, you can sometimes use the same keyframes and reverse the playback. That keeps your CSS cleaner, easier to maintain, and less likely to become the haunted closet of your stylesheet.

Using animation-direction with the animation Shorthand

You can write animation-direction as a separate property, or you can include it in the animation shorthand. The shorthand can include the animation name, duration, timing function, delay, iteration count, direction, fill mode, and play state.

In this example, alternate is the direction. The animation named glow runs for 1.2s, uses ease-in-out, repeats forever, and alternates direction on each cycle.

The shorthand is convenient, but it can become hard to read if you pack too many values into one line. For learning, debugging, or team projects, writing longhand properties is often clearer.

Both versions work. The best choice depends on context. Use shorthand when the animation is simple. Use longhand when clarity matters more than saving a few characters.

Practical Examples of animation-direction

Example 1: A Smooth Bouncing Arrow

A common use for animation-direction: alternate is a small bouncing arrow that invites users to scroll. Without alternating direction, the arrow may jump back to its starting point at the end of each cycle. With alternate, the movement feels smoother.

Example 2: A Reversible Loading Shimmer

For skeleton loading screens, a shimmer effect can move in one direction. But if you want a subtle back-and-forth shine, alternate can do the job without extra keyframes.

Example 3: A Reverse Exit Animation

Suppose you already have a fade-in animation. You can create a fade-out effect by applying animation-direction: reverse. This is not the right solution for every interface, but it is handy for quick reusable animation patterns.

animation-direction and animation-iteration-count

The animation-direction property becomes especially interesting when combined with animation-iteration-count. If an animation only runs once, alternate behaves like normal because there is no second cycle to reverse. Likewise, alternate-reverse starts backward, but without repeated cycles, you will only see that first reverse run.

Here, the animation runs four times. Cycle one plays forward, cycle two plays backward, cycle three plays forward, and cycle four plays backward. This creates a complete back-and-forth motion that ends where it started.

If you use an odd number of iterations with alternate, the animation ends at the 100% keyframe. If you use an even number, it ends at the 0% keyframe. This can matter when you combine the direction with animation-fill-mode.

animation-direction and animation-fill-mode

animation-fill-mode controls what styles apply before or after an animation runs. Meanwhile, animation-direction controls the direction of the animation cycle. When used together, they determine what the user sees at the beginning and end.

For example, with animation-fill-mode: forwards, the element keeps the styles from the final keyframe after the animation ends. But “final” depends on the direction and the number of iterations. If the animation runs in reverse, the final visible keyframe may be the original 0% state.

This is where many developers get surprised. They expect forwards to mean “keep the 100% styles,” but it really means “keep the styles from the end of the animation as it was actually played.” Direction changes that ending.

Best Practices for Using animation-direction

Use It to Reduce Duplicate Keyframes

If two animations are mirror images of each other, consider whether reverse can replace a second set of keyframes. This makes your CSS easier to update. Change one animation, and both directions benefit.

Use alternate for Natural Motion

Real-world motion often goes both ways. A floating badge rises and falls. A glowing outline brightens and softens. A waving icon moves left and right. alternate is ideal for these effects because it avoids the harsh reset that can happen when a looping animation starts over.

Be Careful with Timing Functions

Reversing an animation also affects how timing feels. If the original animation uses ease-in, the reverse playback may feel like an ease-out. That can be helpful or surprising, depending on your goal. Test the animation visually instead of assuming it will feel the same in both directions.

Respect Motion Sensitivity

Animations can improve user experience, but too much motion can become distracting or uncomfortable. For important projects, support the prefers-reduced-motion media query so users who prefer less motion are not forced into a nonstop carnival ride.

Common Mistakes with animation-direction

Expecting alternate to Matter on a Single Run

If your animation runs only once, alternate will not create a back-and-forth effect. You need at least two cycles for alternating direction to become visible.

Forgetting That reverse Starts at the End

With reverse, the animation begins at the 100% keyframe. If that keyframe has a very different style, the element may appear to “jump” when the animation starts. Check the initial visual state carefully.

Confusing Transitions with Animations

CSS transitions respond to state changes, such as hover or focus. CSS animations use keyframes and can run automatically. The animation-direction property only applies to CSS animations, not transitions.

Overusing Infinite Motion

Infinite animations can add polish, but they can also annoy users faster than a popup asking them to subscribe before they have read three words. Use endless motion sparingly, especially near text, buttons, forms, and checkout flows.

Browser Support and Modern Usage

The animation-direction property is widely supported across modern browsers. In typical web projects, you can use it confidently without special tricks. Older browser history may include vendor-prefixed animation syntax, but modern CSS usually relies on the standard unprefixed property.

For production work, test animations in the browsers your audience actually uses. Also test on mobile devices, because performance and comfort can feel different on a small screen. A tasteful desktop animation can become a tiny bouncing distraction when squeezed into a phone layout.

When Should You Use animation-direction?

Use animation-direction when direction is part of the design logic. It is great for loops, reversible states, ambient movement, and repeated effects. It is not a magic wand for every animation problem, but it is one of those CSS properties that becomes more useful the more you notice it.

Here are good situations for using it:

• Creating smooth back-and-forth movement with alternate
• Reusing keyframes for both entrance and exit animations
• Starting an animation from the final keyframe with reverse
• Building pulsing, floating, bouncing, glowing, or shimmering effects
• Reducing duplicate CSS in animation-heavy interfaces

The key is intention. Do not add direction changes just because they exist. Add them because they make the animation smoother, clearer, or easier to maintain.

Developer Experience: What Working with animation-direction Teaches You

After working with CSS animations on real websites, one lesson becomes obvious: the smallest animation properties often solve the most annoying problems. animation-direction is a perfect example. At first glance, it looks like a simple switch. Forward, backward, alternatehow complicated could it be? Then you build a real interface and realize this property can save time, reduce code, and make motion feel more natural.

One common experience happens when creating hover-like visual effects that need to loop. Imagine a call-to-action button with a soft glow. If the glow grows from small to large and then instantly resets, the effect feels cheap. It looks like the browser forgot the second half of the dance. Add animation-direction: alternate, and suddenly the glow expands and contracts smoothly. The button feels intentional instead of nervous.

Another practical lesson is that reverse is useful, but it should be tested carefully. Developers often assume reversing an animation will automatically create a perfect exit effect. Sometimes it does. Other times, the element begins from a state that does not match the current UI. For example, a menu that slides in from the left may not slide out correctly if its actual position, opacity, or visibility has already changed outside the animation. The CSS may be technically correct while the user experience still feels wrong. That is why animation work requires both logic and eyeballs.

A third experience is the importance of pairing animation-direction with the right animation-iteration-count. When you are creating a repeated motion, the number of cycles affects where the animation ends. An even number of alternating cycles can return an element to its original state. An odd number can leave it at the opposite state. This matters for banners, onboarding hints, notification badges, and any component that should stop cleanly after drawing attention.

Performance is another part of the story. The direction property itself is not usually the performance problem. The animated properties are. Animating transform and opacity is generally smoother than animating layout-heavy properties such as width, height, top, or left. So, when using animation-direction, think about what you are reversing. A reversed transform-based animation can feel buttery. A reversed layout animation may feel like the browser is dragging furniture across the floor.

In team projects, clear naming helps too. A keyframe named move tells future developers almost nothing. A name like slide-card-up or pulse-shadow makes the direction easier to understand. When someone sees animation-direction: reverse, they should be able to predict what will happen without opening a detective agency.

The biggest practical takeaway is this: use animation-direction to make animation logic simpler, not more mysterious. If the property makes your CSS shorter and the motion smoother, it is doing its job. If it forces everyone to stare at the code like it is an ancient treasure map, write clearer keyframes instead.

Conclusion

The CSS animation-direction property controls whether an animation plays forward, backward, or alternates between both directions. Its four main valuesnormal, reverse, alternate, and alternate-reversegive developers a clean way to reuse keyframes and create smoother motion.

For simple one-way animations, normal is enough. For reversed effects, reverse can save duplicate code. For natural looping motion, alternate is often the star of the show. And when you need the first cycle to begin backward, alternate-reverse is ready to make its oddly specific but very useful entrance.

Used well, animation-direction helps you write cleaner CSS, build more polished interactions, and avoid awkward animation resets. It is a small property with a surprisingly big impact, which is exactly the kind of CSS feature worth keeping in your front-end toolbox.