Freeze keyframe animation for debugging

Question

Is it possible to freeze a CSS keyframe animation with developer tools to inspect it? I need to identify animated elements in a keyframe animation.

Here is a playground :

body{background:#000;}
.circle{
    position:relative;
    width:10px;padding-bottom:50px;
    margin:100px auto;
}
.circle div {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  
  -webkit-animation: rotate 1.5s infinite;
  -moz-animation: rotate 1.5s infinite;
  -o-animation: rotate 1.5s infinite;
  animation: rotate 1.5s infinite;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}
.circle {
  -webkit-animation: rotate2 1.5s infinite;
  -moz-animation: rotate2 1.5s infinite;
  -o-animation: rotate2 1.5s infinite;
  animation: rotate2 1.5s infinite;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}
.circle:before, .circle div:before {
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; padding-bottom:100%;
  border-radius: 100%;
  background:#fff;
}
@-webkit-keyframes rotate {
  0%   { -webkit-transform : rotate(0deg);}
  50%  { -webkit-transform : rotate(60deg);}
}
@-moz-keyframes rotate {
  0%   { -moz-transform : rotate(0deg);}
  50%  { -moz-transform : rotate(60deg);}
}
@-o-keyframes rotate {
  0%   { -o-transform : rotate(0deg);}
  50%  { -o-transform : rotate(60deg);}
}
@keyframes rotate {
  0%   { transform : rotate(0deg);}
  50%  { transform : rotate(60deg);}
}


@-webkit-keyframes rotate2 {
  50%  { -webkit-transform : rotate(0deg); }
  100% { -webkit-transform : rotate(360deg); }
}
@-moz-keyframes rotate2 {
  50%  { -moz-transform : rotate(0deg); }
  100% { -moz-transform : rotate(360deg); }
}
@-o-keyframes rotate2 {
  50%  { -o-transform : rotate(0deg); }
  100% { -o-transform : rotate(360deg); }
}
@keyframes rotate2 {
  50%  { transform : rotate(0deg); }
  100% { transform : rotate(360deg); }
}

<div class="circle">
    <div><div><div><div><div><div>      
    </div></div></div></div></div></div>
</div>

This animation is simple but I need to freeze more complex ones on key steps to identify each animated element/pseudo element to debug it.

Answer 1

You could use a simple script to pause/resume the animation (http://codepen.io/anon/pen/azdBvw)

var running = true;
var elms;
document.documentElement.addEventListener("click", function(){
  elms = elms || document.querySelectorAll(".circle, .circle div");
  running = !running;
  var newVal = running ? 'running' : 'paused';
  for(var x=0; x < elms.length; x++){
    elms[x].style.webkitAnimationPlayState = newVal;
    elms[x].style.mozAnimationPlayState = newVal;
    elms[x].style.animationPlayState = newVal;
  }
})

Additionally, you can read the exact key frames offset using:

yourcssdec.cssRules[offsetOfKeyFramesDeclaration].cssRules[keyFrameNumber].keyText