CSS 动画在 Chrome 中不起作用

对项目的一些见解： 一个完整的交互式网站，动画将在其中播放..然后它们会停止，一旦它们停止并且动画上发生鼠标悬停事件，它将播放直到动画完成 70%，当单击另一个对象时（在本例中）案例文本）它将完成它的循环。

我的项目合作伙伴在 Google Web Designer 中制作了动画，我们为我们的项目尝试了多种程序，例如 Adob​​e Edge，但不幸的是，由于动画的大小，我们无法使用 SVG 或 PNG 序列，精灵表也是如此..所以我们到达了CSS动画，不幸的是我对CSS动画的了解非常有限，我想知道是否有人能够帮助我。

我有一个问题：为什么我的 CSS 动画在 Chrome 中的表现与在 Firefox 中的表现不同？

我尝试了以下解决方案并查看了以下帖子：

1. css3 动画在 Chrome 中不起作用 https://stackoverflow.com/questions/12265096/css3-animation-not-working-in-chrome
2. CSS 动画在 Chrome 上不起作用 https://stackoverflow.com/questions/21939736/css-animation-not-working-on-chrome
3. Chrome 关键帧动画不起作用 https://stackoverflow.com/questions/25003675/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 中工作，但是为什么当我在文档的样式部分中使用它时它不起作用？

首先：你的 jQuery 有一个错误。改变-webkit-animation-iteration-count从 0.9 到 0.7。另外，请看一下：http://caniuse.com/#search=animation http://caniuse.com/#search=animation。您可以看到，您必须为 google chrome 使用前缀“-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 

to

3s linear 0s 0.1 normal forwards

并留下style在img标签空白处

对于您问题的停止和播放部分：

jsfiddle.net/Lvq6ee8d/14/ http://jsfiddle.net/Lvq6ee8d/14/

解释一下：你知道你的动画运行3秒，所以我设置了一个超时函数，该函数在触发“animationstart”事件时启动。然后在 300ms(3000ms/100*10 = 300ms) 后，animationplaystate 设置为暂停。所以 10% 后，动画停止。悬停时，动画继续。另请记住，在本例中我们需要稍微更改一下 css。我们将动画迭代设置为所需的数量，即我们希望动画完成时的位置（在我的示例中为 1），因此我们可以使用暂停并运行它。