帶有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應該與其他兩個相同。