Interrupting/stop a CSS3 transition on the actual position/state

Active3 hr before
Viewed126 times

8 Answers


I am writing a jQuery plugin to animate elements via CSS3 Transitions. in jQuery there is as .stop() that interupts the current animation on the selected element. ,You can store the cssObject passed to the animation, to the data of the element, and on stop loop through them to get the current values.,Connect and share knowledge within a single location that is structured and easy to search.,Making statements based on opinion; back them up with references or personal experience.

so in the example using

var $animated = $('div');
   "height": $animated.css('height'),
   "width": $animated.css('width')
}, 1);
load more v

Since true pausing is really what we’re after here, let’s stick with animation-play-state and look into other ways of using it.,The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value.,We can create a toggle that plays and pauses the animation by reading the current value of animationPlayState:,It works, but has a major caveat: the animations are technically still running. The animation is merely toggling between its initial position, and where it is next in the sequence.

The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value.

.paused {
   animation - play - state: paused;
load more v

11 Interrupting/stop a CSS3 transition on the actual position/state,2434 How can I transition height: 0; to height: auto; using CSS?,Below is an attempt I made to stop a CSS3 transition, but it doesn't seem to work (click the square once to slide, click mid-slide to remove CSS3 transition properties). However, the second click doesn't stop the animation. ,I have an app where I am trying to switch from jQuery .animate to CSS3 transitions to move a list of cards left/right in response to swipe gestures and button presses.


#block {
   position: absolute;
   width: 100 px;
   height: 100 px;
   background: #ff0000;

.animate {
   transition: left 2 s; -
   moz - transition: left 2 s; -
   webkit - transition: left 2 s; -
   o - transition: left 2 s; -
   ms - transition: left 2 s;
load more v

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration., there is a matching transition-property value, and ,matching transition-property value, in §3 , end value is the value of the transitioning property in the after-change style,


div {
   transition - property: opacity;
   transition - duration: 2 s;
load more v

In desktop Chrome and Safari is good, but in the default browser on Android 4.1.x (SGSII, Galaxy Nexus, etc) this approach does not work - transition does not stop. Additionally, I note that the situation is only a relatively translate3d: with translate and position CSS props (e.g. "top", "left") it works.,Stopping a running translate2d or 3d on chrome, safari, firefox, and iphone webview can be done by setting a transition of "none" or a transition with a negative or 0 time delay and giving a new translation to the current position as described above.,This however does not work for android webview. The only solution I could find for android was to set the transition delay to a small positive number like .001s and giving a translate for the current position.,A more practical work-around on at least certain devices is to use a negative value for the webkitTransitionDelay, forcing a new transition to take effect, but choosing this value such that the transition starts directly in its finished state.

I'm trying to animate an element by CSS3 transtions using translate3d: JSFiddle.

// for start animation
   .css("-webkit-transition", "all 100s");
.css("-webkit-transform", "translate(0, -900px)");
// for stop animation
   .css("-webkit-transition", "none");
load more v

jumpToEnd (default: false) Type: Boolean A Boolean indicating whether to complete the current animation immediately. Defaults to false. ,Description: Stop the currently-running animation on the matched elements., clearQueue (default: false) Type: Boolean A Boolean indicating whether to remove queued animation as well. Defaults to false. ,Click the slideToggle button to start the animation, then click again before the animation is completed. The animation will toggle the other direction from the saved starting point.

<div id="hoverme"> Hover me <img id="hoverme" src="book.png" alt="" width="100" height="123"></div>
load more v

An element can shake to draw attention to its position,An element can jiggle to draw attention to its shape,An element can flash to draw attention to itself,An element can pulse to draw attention to its visibility

Specifying a direction

To force an animation direction, add either in or out to the animation name.


Specifying a direction

To force an animation direction, add either in or out to the animation name.

load more v

A transition is a selection-like interface for animating changes to the DOM. Instead of applying changes instantaneously, transitions smoothly interpolate the DOM from its current state to the desired target state over a given duration.,Returns a promise that resolves when every selected element finishes transitioning. If any element’s transition is cancelled or interrupted, the promise rejects.,For each frame that a transition is active, it invokes its tweens with an eased t-value ranging from 0 to 1. Within each frame, the transition invokes its tweens in the order they were registered.,If the target value is null, the attribute is removed when the transition starts. Otherwise, an interpolator is chosen based on the type of the target value, using the following algorithm:

Co-authored-by: Philippe Rivière <>
load more v

Other "state-transition" queries related to "Interrupting/stop a CSS3 transition on the actual position/state"