Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To reverse an animation in progress, call reverse() on its Web Animations API Animation object. CSS animation-direction: reverse sets how animation iterations run; it is not a runtime command to turn an already-running animation around.
Why changing CSS direction does not reverse an animation in progress
CSS animation-direction configures the direction of an animation’s iterations. Values such as reverse, alternate, and alternate-reverse determine how those configured cycles run; they do not provide an imperative control for flipping the current playback direction on demand. See the MDN reference for animation-direction.
That distinction matters for interactive UI: if an element starts opening and the user asks it to close before the opening animation finishes, changing the stylesheet’s iteration direction is not the same as reversing the animation from its current point. For runtime playback control, use the Web Animations API.
Reverse an animation created with the Web Animations API
The API exposes playback controls on an Animation object, including play, pause, reverse, finish, and cancel. Call reverse() to invert the current playback direction and continue playing:
#1 Best Overall
const animation = element.animate(
[{ transform: "translateX(0)" }, { transform: "translateX(100px)" }],
{ duration: 500, fill: "both" }
);
// Reverse from the animation's current position.
animation.reverse();Because the reversal operates on the animation object, it changes direction from that object’s current playback state rather than setting a separate CSS iteration pattern. MDN documents that reversing a paused animation continues it in reverse, and that an unplayed animation is played backward. See MDN’s Animation.reverse() reference.
Reverse a CSS animation already applied to an element
You can also work with animations associated with an element, including CSS animations, by obtaining their Animation objects and reversing the intended one. For example:
Rank #2
const animations = element.getAnimations();
const animation = animations[0];
if (animation) {
animation.reverse();
}This example assumes the first returned animation is the one you mean to control. An element may have more than one animation, so identify the intended object rather than reversing every animation indiscriminately. The Web Animations API guide describes finding animations through Document.getAnimations(); see MDN’s guide to using the Web Animations API.
What reversal does—and what it does not do
The Web Animations specification defines playback direction through playback rate: with a negative rate, animation time decreases as timeline time advances. As the specification puts it, “a playback rate of -1 will cause the animation’s current time to decrease at the same rate as the time values from its timeline increase.” Read the W3C Web Animations specification.
reverse() changes direction and plays. The other playback methods serve different purposes:
finish()moves the animation to the end in its current playback direction; it does not reverse it.cancel()aborts playback and clears the animation effect; it does not play the effect backward.
Handle reversal errors and timeline state
The specification requires an associated active timeline for the reverse procedure. If calling reverse() throws an InvalidStateError, inspect whether the animation has an associated timeline and whether that timeline is active. The relevant requirements are in the W3C Web Animations specification.
Rank #4
Browser availability
MDN labels Animation.reverse() widely available and reports support across browsers since March 2020. That is a broad compatibility summary, not a per-browser or per-version support matrix; consult the MDN API reference for its current compatibility data.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
