CSS動畫在Chrome中不起作用

Question

對項目的一些洞察： 一個完整的交互式網站，動畫將播放..然後他們會停下來，一旦他們停止並且動畫發生了一個鼠標懸停事件，它會播放直到70％的動畫是完整的，當點擊另一個對象（在這種情況下是文本），它將完成它的循環。

我的項目合作伙伴在Google網頁設計師製作了動畫，我們已經爲我們的項目嘗試了多個程序，例如Adobe Edge，但不幸的是，由於我們動畫的大小，我們無法使用SVG或PNG序列，同樣的spritesheets ..所以我們到達css動畫，不幸的是我的css動畫的知識是非常有限的，我想知道如果有人能夠幫助我。

我有一個問題：爲什麼我的CSS動畫在Chrome中的行爲與Firefox中的行爲不一樣？

我已經嘗試了以下解決方案，並看着下面的帖子：

1. css3 animation not working in chrome
2. CSS Animation not working on Chrome
3. Chrome Keyframe animation not working

的jQuery：

<script> 
$(document).ready(function(){ 
    //$('.gwd-img-r1sa').toggle(function() { 
    // $('.gwd-img-r1sa').css({"animation-play-state":"paused","-webkit-animation-play-state":"paused"}); 
    //}, function() { 
    // $('.gwd-img-r1sa').css({"animation-play-state":"running","-webkit-animation-play-state":"running"}); 
    //}); 

    $(".gwd-img-r1sa").on("mouseenter", function(){ 
     $(".gwd-img-r1sa").css({"animation-iteration-count":"0.7", "-webkit-animation-iteration-count":"0.9"}); 
    }); 

    $("#play").on("click", function(){ 
     $(".gwd-img-r1sa").css({"animation-iteration-count":"1", "-webkit-animation-iteration-count":"1"}); 
    }); 

}); 

</script> 

個CSS：

<style type="text/css"> 

    /**.gwd-img-r1sa:hover, .gwd-img-r1sa:focus 
{ 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
} 
**/ 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 

body { 
    background-color: transparent; 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    -webkit-perspective: 1400px; 
    -moz-perspective: 1400px; 
    perspective: 1400px; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

.gwd-img-r1sa { 
    position: absolute; 
    width: 192px; 
    height: 146px; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    left: 312px; 
    top: 604px; 
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
} 

@-webkit-keyframes gwd-empty-animation { 
    0% { opacity: 0.001; } 
    100% { opacity: 0; } 
} 
@-moz-keyframes gwd-empty-animation { 
    0% { opacity: 0.001; } 
    100% { opacity: 0; } 
} 
@keyframes gwd-empty-animation { 
    0% { opacity: 0.001; } 
    100% { opacity: 0; } 
} 
@-webkit-keyframes gwd-gen-hlergwdanimation_gwd-keyframes { 
    0% { left: 312px; top: 604px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; } 
    30% { left: 595px; top: 350px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; } 
    50% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear;} 
    100% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); -webkit-animation-timing-function: linear; } 
} 
@-moz-keyframes gwd-gen-hlergwdanimation_gwd-keyframes { 
    0% { left: 312px; top: 604px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; } 
    30% { left: 595px; top: 350px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; } 
    50% { left: 595px; top: 350px; -moz-transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; } 
    100% { left: 595px; top: 350px; -moz-transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); -moz-animation-timing-function: linear; } 
} 
@keyframes gwd-gen-hlergwdanimation_gwd-keyframes { 
    0% { left: 312px; top: 604px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; } 
    30% { left: 595px; top: 350px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; } 
    50% { left: 595px; top: 350px; transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; } 
    100% { left: 595px; top: 350px; transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); animation-timing-function: linear; } 
} 
body .gwd-gen-hlergwdanimation { 
    -webkit-animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards; 
    -moz-animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards; 
    animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards; 
} 

</style> 

HTML：

<img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style="" style="animation-iteration-count: 0.1;"> 


<div id="play"> 
    click here to play 
</div> 

是否有人可以幫忙嗎？

此外：爲什麼圖像會移動，然後停止..然後在懸停時，它有時會跳到30％，而不是直到30％才玩？跳過70％而不是打到70％也是一樣？

剛剛發現的東西，可以注意值得：

更改：<img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style="" style="animation-iteration-count: 0.1;">

這樣：<img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style="" style="-webkit-animation-iteration-count: 0.1;">

原因動畫的此位在Chrome中工作，但爲什麼沒有它的工作當我在我的文檔的樣式部分中使用它時？

Answer 1

首先：你的jQuery有一個錯誤。將-webkit-animation-iteration-count從0.9更改爲0.7。另請參閱：http://caniuse.com/#search=animation。您可以看到，您必須爲谷歌瀏覽器使用前綴「-webkit」。這就是爲什麼，你需要在你的img風格標籤中定義它們。像這樣：

<img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style="" style="animation-iteration-count: 0.1;-webkit-animation-iteration-count: 0.1;"> 

一個更好的辦法來做到這一點，將是你的樣式表來定義迭代次數，而不是在HTML中。如果你需要對不同的img進行不同的迭代計數，那麼對你來說這不是一個好的解決方案，當然。否則改變：

3s linear 0s 1 normal forwards 

到

3s linear 0s 0.1 normal forwards 

並留下空白

對於停止的IMG標籤style，發揮你的問題的一部分：

jsfiddle.net/Lvq6ee8d/14/

爲了解釋：你知道你的動畫運行3秒，所以我設置了一個超時函數，當事件「animationstart」被觸發時開始。然後在300ms（3000ms/100 * 10 = 300ms）之後，animationplaystate被設置爲暫停。所以在10％之後，動畫停止。在懸停時，動畫繼續。還要記住，在這個例子中，我們需要稍微改變一下css。我們將動畫迭代設置爲期望的數量，當動畫完成時（我的例子中爲1），我們可以使用暫停和運行。