凍結調試關鍵幀動畫

Question

是否可以使用開發人員工具凍結CSS關鍵幀動畫來檢查它？我需要識別關鍵幀動畫中的動畫元素。

這裏是一個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>

這部動畫很簡單，但我需要凍結的關鍵步驟，以確定每個動畫元素/僞元素調試它更復雜的。

Answer 1

你可以使用一個簡單的腳本來暫停/恢復動畫（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; 
    } 
}) 

此外，您可以閱讀確切的關鍵幀偏移使用：

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