How to Pause CSS Transition Mid-Way

How do I pause CSS transition?

Transitions

A solution would be to remove the transition class and save the current state of styles (margin-leftin the example) when stopping. And when starting just add the transition class again.

var boxOne = document.getElementsByClassName('box')[0];var running = false;
var toggleTransition = function() {  if(!running)   {     boxOne.classList.add('horizTranslate');  } else {    var computedStyle = window.getComputedStyle(boxOne),        marginLeft = computedStyle.getPropertyValue('margin-left');    boxOne.style.marginLeft = marginLeft;    boxOne.classList.remove('horizTranslate');      }  
  running = !running;}

.box {  margin: 30px;  height: 50px;  width: 50px;  background-color: blue;}.box.horizTranslate {  -webkit-transition: 3s;  -moz-transition: 3s;  -ms-transition: 3s;  -o-transition: 3s;  transition: 3s;  margin-left: 50% !important;}

<div class='box'></div> <button class='toggleButton' onclick='toggleTransition()'>Toggle</button>

Is there a way to pause CSS transition mid-way?

1) You can use the animation-play-state CSS attribute, and toggle between

animation-play-state:running, and animation-play-state:paused
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

2) The short answer is yes. Whichever property you read halfway through your transition (lets say height), will return the current value at the moment queried.

How to pause during middle of animation/transition

Try something like this. If you add in the pause time to the total time (to get 8 seconds instead of 6), and then calculate the period of time that you want the element to be static (3/8 + 2/8, where 2/8 is the 2 second pause time), and then make the element return to the default width by the end (another 3/8ths of the total time), you should get a 2-second pause in between.

I used only the default animation and @keyframes here. You can copy this code into the other browser-specific versions for compatibility.

animation: widthChange 8s;

@keyframes widthChange {
    0% {width: 200px;}
    37.5% {width: 400px;}
    62.5% {width: 400px;}
    100% {width: 200px;}
}

Stripped-down example: http://jsfiddle.net/IronFlare/pjnk6z6f/

Pause css transition on before element

Right your problem here is you are trying to pause an animation when you have a transition (Auto tween animation).

So instead of transition you want:

@-webkit-keyframes example {  from {    width: 0%;  }  to {    width: 100%;  }}@keyframes example {  from {    width: 0%;  }  to {    width: 100%;  }}.timer_1.start:before {  width: 100%;  -webkit-animation-name: example;  animation-name: example;  -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-timing-function: linear;  animation-timing-function: linear;}

How to stop CSS3 transition

So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/

The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop')); (Probably would want to store all properties in an object in the element with $(this).data(props); and loop through them).

Once you have explicitly set the properties you can run a 0s animation to override the previous animation and effectively halt the element.

---

Related Topics