带有Firefox（轻微工件）和Safari（不可见）的CSS3动画问题？

Question

Firefox和Safari中的CSS3动画出现问题。 在Chrome和Internet Explorer中，它的工作原理就像一个超级按钮。 花了一段时间尝试自己弄清楚这一点，但没有成功。 我遵循了所有可能找到的规则，但是我一定缺少一些东西。

的HTML

<div class="background">
<div id="canvas" class="loading"></div>

的CSS

    .background {
    background:#333;
    padding-bottom: 140px;
    padding-top: 65px;
}
#canvas.loading {
    -webkit-animation: animate 1.5s linear infinite;
    -moz-animation: animate 1.5s linear infinite;
    animation: animate 1.5s linear infinite;
    clip: rect(0, 80px, 80px, 40px);
    height: 80px;
    width: 80px;
    position:absolute;
    left:45%;
}
@-webkit-keyframes animate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(220deg)
    }
}
@keyframes animate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(220deg)
    }
}
@-moz-keyframes animate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(220deg)
    }
}
#canvas.loading:before {
    -webkit-animation: animate2 1.5s ease-in-out infinite;
    -moz-animation: animate 1.5s linear infinite;
    animation: animate2 1.5s ease-in-out infinite;
    clip: rect(0, 80px, 80px, 40px);
    content:'';
    border-radius: 50%;
    height: 80px;
    width: 80px;
    position:absolute
}
@-webkit-keyframes animate2 {
    0% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        transform: rotate(-140deg);
    }
    50% {
        box-shadow: inset #5AA0E7 0 0 0 2px;
    }
    100% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        transform: rotate(140deg);
    }
}
@-moz-keyframes animate2 {
    0% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        transform: rotate(-140deg);
    }
    50% {
        box-shadow: inset #5AA0E7 0 0 0 2px;
    }
    100% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        transform: rotate(140deg);
    }
}
@keyframes animate2 {
    0% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        transform: rotate(-140deg);
    }
    50% {
        box-shadow: inset #5AA0E7 0 0 0 2px;
    }
    100% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        transform: rotate(140deg);
    }
}

这是JSFIDDLE： http : //jsfiddle.net/myo4r9kk/

任何帮助将不胜感激！

Answer 1

在FF 35中为我工作，不能说太多了。

Safari需要将transform属性作为前缀，因此将css更改为以下内容将使其起作用（仅包括相关部分）：

@-webkit-keyframes animate {
    0% {
        -webkit-transform: rotate(0deg)
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(220deg)
        transform: rotate(220deg)
    }
}

@-webkit-keyframes animate2 {
    0% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        -webkit-transform: rotate(-140deg);
        transform: rotate(-140deg);
    }
    50% {
        box-shadow: inset #5AA0E7 0 0 0 2px;
    }
    100% {
        box-shadow: inset #5AA0E7 0 0 0 17px;
        -webkit-transform: rotate(140deg);
        transform: rotate(140deg);

    }
}

最好以相同的方式更改@keyframes ，以防万一Safari一天支持不带前缀的@keyframes但仍需要前缀transform规则。

最后一件事：将属性的前缀版本放在标准版本之前通常被认为是最安全的。 我不太确定，但我想这也适用于关键帧，因此您可能需要将@-moz-keyframes放在@keyframes之前。 这甚至可以解决Firefox的问题（假设该标准的有效实现被有缺陷的版本覆盖，因为您将前缀放在该标准之后。

我冒昧地用所有这些更改来更新您的提琴： http : //jsfiddle.net/myo4r9kk/2/

编辑

我刚刚在您的代码中找到了这个：

-webkit-animation: animate2 1.5s ease-in-out infinite;
-moz-animation: animate 1.5s linear infinite;
animation: animate2 1.5s ease-in-out infinite;

也许可以解释Firefox的问题，您是否有机会在FF <15上对此进行测试？ 无论如何， -moz-animation应该与其他两个相同。