Question

嘿伙计们跟随jsfiddle：jsfiddle.net/Lvq6ee8d/12 /

如果在Safari中播放它，它有时会起作用，有时它不起作用。您可以检查控制台以查看＆＃34; hallo＆＃34;被熄灭。但是在Chrome中，它永远不会被触发。

所以有两个问题：

为什么这有时会在Safari中运行，而从不在chrome中使用，其次：

这有解决方案吗？

HTML：

<img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style=""/>


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

CSS：

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;
}

jQuery的：

$(".gwd-gen-hlergwdanimation").on('webkitAnimationStart oanimationstart msAnimationStart 
animationstart', function() {
        setTimeout(function(){
            $(".gwd-gen-hlergwdanimation").css({'-webkit-animation-play-state': 'paused','animation-play-state':'paused'})          
        },300);
    console.log('hallo');
    })

Answer 1

当jQuery运行以附加事件时，CSS已经启动了动画！

因此，它无法触发animationstart事件，因为它已经完成。

尝试使用domReady代替onLoad（或者 - 尤其是因为您正在使用jQuery - 只需使用$(function() {...})来包装您的代码），因为这样可以更快地运行能够在CSS动画开始之前附加事件。

animationstart有时只触发？

1 个答案: