Jquery animationstart有时只触发？

嘿，关注jsfiddle的家伙们：jsfiddle.net/Lvq6ee8d/12/

如果这是在Safari中玩的，它有时有效，有时无效。你可以查看控制台，看到“哈罗”正在熄灭。然而，在Chrome中，它永远不会被触发

所以有两个问题：

为什么这在Safari中有时起作用，而在chrome中则不起作用，其次：

有有效的解决办法吗

Html:

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

---

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

因此，它无法触发

animationstart

事件，因为它已经完成了

---

尝试使用

domReady

而不是

onLoad

（或者——特别是因为您使用jQuery——只需使用

$（function（）{…}）

来包装代码），因为这将运行得更快，并且能够在CSS动画开始之前附加事件。

请在问题中包含您的代码。因为动画是在CSS中定义的，在JS有机会运行之前应该已经启动了。那么，在css代码运行之前，怎么可能等待JS加载呢@JamesDonnelly当我使用jsfiddle时是否真的需要包含代码？@FrederikWitte是的。如果JSFIDLE失败，这个问题将毫无价值，因为没有人知道您在谈论什么

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

$(".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');
    })