Michael Douglas Michael Douglas -4 years ago 179
CSS Question

Freeze CSS Animation using javascript

When I stop my animation it resets to the start state (0 zero degrees) how do one pause it in its current rotation point? Stop and Start work fine.

function animFeeze(){
//// what goes here?
}
function animStart(){
// @-webkit-keyframes spinY {
// from { transform: rotateY(0); }
// to { transform: rotateY(360deg); }
document.getElementById("anim").style.WebkitAnimationName = "spinY";
}
function animStop(){
// @-webkit-keyframes noAnim {}
// @keyframes noAnim {}
document.getElementById("anim").style.WebkitAnimationName = "noAnim";
}
function init() {

animatePause.addEventListener("click", animFreeze, false);
animateStart.addEventListener("click", animStart, false);
animateStop.addEventListener("click", animStop, false);
console.log("DOM fully loaded and parsed");
}
window.addEventListener("DOMContentLoaded", init, false);

Answer Source

Use

document.getElementById("anim").style.animationPlayState="paused";

Set it to "running" to resume.

Example JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download