CSS動畫在Firefox和IE上不起作用

Question

我已將此代碼完美地在Chrome和Safari上運行，但是在FF和IE上卻無法正常運行，我嘗試了幾個小時來解決此問題，但仍然沒有頭緒。

@-moz-keyframes imageAnimation { 
0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
}
8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
}
17% {
    opacity: 1;
    -moz-transform: scale(1.1) rotate(3deg);
}
25% {
    opacity: 0;
    -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }

這是完整的代碼

Answer 1

我看到了您制作的CSS。 如果您正在使用

@-o-keyframes imageAnimation

改變你的

-webkit-animation-timing-function

至

-o-animation-timing-function

注意前綴。 對您制作的其他關鍵幀執行相同的操作。

請檢查http://caniuse.com/css-animation是否具有瀏覽器兼容性。 還要檢查所有瀏覽器的CSS關鍵幀動畫嗎？ 獲得更好，更簡單的語法。