Firefox（轻微伪影）和 Safari（不可见）的 CSS3 动画有问题？

Question

我的 CSS3 动画在 Firefox 和 Safari 中有问题。它在 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 的问题（假设标准的有效实现被错误版本覆盖，因为您将前缀放在标准之后。

我冒昧地更新了您的 fiddle，其中包含所有这些更改：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 应该与其他两个相同。

Firefox（轻微伪影）和 Safari（不可见）的 CSS3 动画有问题？

Issues with CSS3 Animation with Firefox (slight artifacts) and Safari (not visible)?

html

css

safari

firefox