Pause/resume transition

by Anupama

HTML

<div id="cont"></div>
<br /><br />
<button id="btn">Pause / Resume</button>

CSS

#cont {
    background-color : #ccc;
    width: 100px;
    height: 100px;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

JavaScript

var clearTransition = function(element) {
    element.style.webkitTransition = "none";
    element.style.transition = "none";
};
var pauseTransition = function(element) {
  var property = "transform",
      computedStyle = getComputedStyle(element),
      propertyValue = computedStyle.getPropertyValue(property);
  clearTransition(element);
  element.style["-webkit-" + property] = propertyValue;
  element.style[property] = propertyValue;
};
var resumeTransition = function(element, transitionStr, transformStr) {
    element.style.webkitTransition = transitionStr;
    element.style.transition = transitionStr;
    elem.style.webkitTransform = transformStr;
    elem.style.transform = transformStr;   
};
var transitionStr = "transform 10s linear",
transformStr = "translateX(400px)";
var paused = false;
var elem = document.getElementById("cont");
elem.style.webkitTransition = transitionStr;
elem.style.transition = transitionStr;
var button = document.getElementById("btn");
btn.addEventListener("click", function() {
    if(paused) {
        resumeTransition(elem, transitionStr, transformStr);
    } else {
        pauseTransition(elem);
    }
    paused = !paused;
});

/* start transition */
elem.style.webkitTransform = "translateX(400px)";
elem.style.transform = "translateX(400px)";