Question

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

我提供了两个jsfiddle示例，一个使用jQuery，另一个没有jQuery。其他一切都是一样的。没有自定义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。

有没有人知道为什么会发生这种情况？

UPDATE ：显然它在某些系统上无法与jQuery 1.9.1一起使用

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

jQuery混淆了纯CSS动画

0 个答案: