Javascript 函数和animationstart/animationend事件上的jQuery问题

我正在尝试制作一些我在

webkit

浏览器上使用的3D动画，以便在其他浏览器上使用

首先，我对

css

做了一点修改，使之对其他浏览器也有效（我知道一些

css

规则仅适用于最新的浏览器版本，例如

IE

）：

我知道

css

可能毫无用处-我只是展示我添加的内容，使其对非

webkit

浏览器也有效

我的动画无法在

ubuntu13.10

上的

firefox28

上运行。我发现动画开始事件上的代码绑定未执行：

this.testElement.on({

                    'animationstart webkitAnimationStart oAnimationStart MSAnimationStart': $.proxy(function(){
                     ....
                    }, this),
                    'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd':  $.proxy(function(){
                     ....
                    }, this)
                });

正如我所说，动画在

Chrome

中工作，但在非

webkit

家族的浏览器中不工作。因为，我正在录制动画开始和结束事件，我想，我的

css

有问题

---

有人能告诉我应该尝试什么吗？

关键帧规则不能混合供应商特定的样式；所有内容必须对特定浏览器有效

所以

这是无效的。用3种不同的规则来写

@keyframes test {
    0% { transition: rotate3d(1, 0, 0, 0) }
  100% { transition: rotate3d(1, 0, 0, -180deg) }
}

等等

一旦动画正常工作，事件绑定将稍后出现：-）

@keyframes test
  0%
    -moz-transition: rotate3d(1, 0, 0, 0)
    -o-transition: rotate3d(1, 0, 0, 0)
    transition: rotate3d(1, 0, 0, 0)
  100%
    -moz-transition: rotate3d(1, 0, 0, -180deg)
    -o-transition: rotate3d(1, 0, 0, -180deg)
    transition: rotate3d(1, 0, 0, -180deg)

@keyframes test {
    0% { transition: rotate3d(1, 0, 0, 0) }
  100% { transition: rotate3d(1, 0, 0, -180deg) }
}