How do I pause CSS transition?

Question

I need to pause a CSS transition at any time during the transition. I know there is a solution with calculating the current value of the transitioning property and applying it directly, however this gave me "jumping" results in Safari and IE11.

What I though of is to increase the transition-duration value to something big, that is in my theory should have almost paused the transition, but it seems it's not the case:

https://jsfiddle.net/j8p0msff/

$('#pause').on('click', function() {
    $('.ball').css('transition-duration: 5000s');
});

Any other ideas? Thanks!

Take a look at: http://stackoverflow.com/questions/18216060/is-there-a-way-to-pause-css-transition-mid-way — Mazz, Mar 29 '17 at 14:18
Possible duplicate of [Is there a way to pause CSS transition mid-way?](http://stackoverflow.com/questions/18216060/is-there-a-way-to-pause-css-transition-mid-way) — Heretic Monkey, Mar 29 '17 at 14:19
@Mazz, their solution is to use `animation-play-state` which is an animation property. Please correct if I am wrong. — sdvnksv, Mar 29 '17 at 14:20
@MikeMcCaughan, I've tried what the author asked in p.2 and it worked like I described in my post. The p.1 of the best answer is about CSS animations if I am not mistaken, not the transition. — sdvnksv, Mar 29 '17 at 14:21
I don't get the downvotes. It is not a duplicate and the answer there is not a working solution. — sdvnksv, Mar 29 '17 at 14:22
Okay, then there's http://stackoverflow.com/q/5312289/215552, http://stackoverflow.com/q/12930098/215552, http://stackoverflow.com/q/19683554/215552, http://stackoverflow.com/q/5804444/215552, http://stackoverflow.com/q/28903825/215552, take your pick... All I did was search for "site:stackoverflow.com pause css transition" and got "About 9,510 results".... — Heretic Monkey, Mar 29 '17 at 20:44
@MikeMcCaughan, thanks, Mike. I can do the search. However, it takes a little more to find an answer. The first three links suggest to apply the current transition value to the container, which I tried and indicated this in my question. The second two links suggest to use `animation-play-state` which is about css `animation`, not `transition`. I suggested another approach with `transition-duration`, and hoped this could be elaborated. — sdvnksv, Mar 30 '17 at 08:44

Mazz · Accepted Answer · 2017-03-29T15:07:35.627

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>

Animations

You could use: animation-play-state

With e.g. Javascript: document.getElementById('myId').style.animationPlayState = 'paused'

var toggleAnimation = function(){
  state = document.getElementById('myId').style.animationPlayState == 'paused' ? 'running' : 'paused';
  document.getElementById('myId').style.animationPlayState = state;
}

div#myId {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    -webkit-animation-play-state: running; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
    animation-play-state: running;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

<div id='myId'></div>

<button onclick="toggleAnimation()">Toggle Animation</button>

Isn't it an `animation` property, not a `transition` one? This doesn't work with `transition`. — sdvnksv, Mar 29 '17 at 14:24
Thanks, Mazz. But the code in my project requires the use of `transition`, not `animation`. That's why I can't use `animation-play-state`. PS the ball is just an illustration to not make your read the whole of my repo (as nobody would). — sdvnksv, Mar 29 '17 at 14:28
Thanks! I've tried that too, but it was "jumpy" in IE and Safari. Please check my other post if you have time: http://stackoverflow.com/questions/43090225/pausing-transition-in-the-middle-causes-element-jump?noredirect=1. I am really stuck on this, so any help would be appreciated! — sdvnksv, Mar 29 '17 at 15:30
Well that's weird, i have no IE here but it's working fine in safari. I'll take a look on it later — Mazz, Mar 29 '17 at 15:53
yeah I've decided to remove it since I failed to find a way to puase css transition and rewritten the code in favor of css animations which have `animation-play-state` as you pointed out. — sdvnksv, Mar 30 '17 at 10:49

How do I pause CSS transition?

1 Answers1

Linked