Question

我正在尝试制作一些我在web-kit浏览器上工作的3D动画，以便在其他浏览器上工作。

首先，我已将css稍微更改为对其他浏览器有效（我知道某些css规则仅适用于最新的浏览器版本 - {{1}例如）：

IE

我知道.container -webkit-transform-style: preserve-3d transform-style: preserve-3d .front -webkit-backface-visibility: hidden backface-visibility: hidden .back -webkit-backface-visibility: hidden backface-visibility: hidden -webkit-transform: rotate3d(1, 0, 0, -180deg) transform: rotate3d(1, 0, 0, -180deg) .show .container -webkit-animation: test 1s ease-in-out forwards -moz-animation: test 1s ease-in-out forwards -o-animation: test 1s ease-in-out forwards animation: test 1s ease-in-out forwards @-webkit-keyframes test 0% -webkit-transform: rotate3d(1, 0, 0, 0) 100% -webkit-transform: 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)可能没有任何说明 - 我只是展示我添加的内容，使其对非css浏览器有效。

我的动画无效webkit Firefox 28。我发现是没有执行动画启动事件的代码绑定：

Ubuntu 13.10

正如我所说，动画在this.testElement.on({ 'animationstart webkitAnimationStart oAnimationStart MSAnimationStart': $.proxy(function(){ .... }, this), 'animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd': $.proxy(function(){ .... }, this) });中有效，但在非Chrome家族的浏览器中则无效。因为，我正在考虑来自this article的动画开始和结束事件，我猜我的web-kit有问题。

有人可以建议我应该尝试什么吗？

Answer 1

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

所以，

@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)

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

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

等等。

一旦你的动画工作，事件绑定将会出现： - ）

在函数和animationstart / animationend事件上使用jQuery问题

1 个答案: