jquery - jQuery 与纯 CSS 动画混为一谈

Question

我刚开始玩纯 CSS 动画，我注意到一些动画在 jQuery 存在时不起作用。到目前为止，我注意到像 translateY 这样的翻译属性不起作用。

我提供了两个 jsfiddle 示例，一个带有 jQ​​uery，一个没有。其他一切都是一样的。没有自定义的 JavaScript 代码，只是包含了 jQuery 库。

• 没有 jQuery（注意两个动画都在工作）：http: //jsfiddle.net/HsPuV/3/
• 使用 jQuery（只有红色有效）：http: //jsfiddle.net/HsPuV/4/

CSS 代码：

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(8%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(50%); 
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}

如果您打开开发人员工具检查器并停用并激活-webkit-animation-name属性，动画将开始运行！我正在使用 Chrome 进行测试。它根本不适用于 Firefox 或 IE。

有谁知道为什么会这样？

更新：显然它在某些系统上不适用于 jQuery 1.9.1

更新：它适用于 jQuery 的边缘版本，所以它可能是一个已经解决的错误。要让它在 Firefox 上运行，它需要以 -moz 为前缀。