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），我们可以使用暂停和运行。