動畫/關鍵幀不能在Firefox工作（開始通過JavaScript CSS動畫）

Question

這個代碼在當前 Chrome和Internet Explorer，而不是在當前火狐（更新後的代碼與unnecessary -moz prefix）：

@-moz-keyframes sh-tada { 
    10% { 
    opacity:1; 
    } 
    80% { 
    opacity:1; 
    } 
    100% { 
    opacity:0; 
    } 
} 

@-webkit-keyframes sh-tada { 
    10% { 
    opacity:1; 
    } 
    80% { 
    opacity:1; 
    } 
    100% { 
    opacity:0; 
    } 
} 

@keyframes sh-tada { 
    10% { 
    opacity:1; 
    } 
    80% { 
    opacity:1; 
    } 
    100% { 
    opacity:0; 
    } 
} 

.sh-tada { 
    opacity:0; 
    -webkit-animation: sh-tada 2s linear 1; 
    -moz-animation: sh-tada 2s linear 1; 
    animation: sh-tada 2s linear 1; 
} 

該元素根本不出現。

唉，沒有其他相同資格問題，在這種情況下幫助...

添加/提示

也許我的問題不在於內碼以上，但在這個問題

如何激發CSS動畫？

有問題的元素只需打開...style.display='inline'即可。對於Chrome和IE，這似乎是好的。但是，Firefox不適用嗎？

Answer 1

這是因爲您缺少Mozilla Broswer關鍵幀的定義。

@-moz-keyframes sh-tada { 
10% { 
    opacity:1; 
} 
80% { 
    opacity:1; 
} 
100% { 
    opacity:0; 
} 
} 

和MOZ動畫

.sh-tada { 
    -moz-animation:sh-tada 2s linear 1; 
} 

這些添加到你的CSS，它應該工作。

Answer 2

你忘了爲firefox添加規則。結帳以下代碼

@-webkit-keyframes sh-tada { 
    10% { 
    opacity:1; 
    } 
    80% { 
    opacity:1; 
    } 
    100% { 
    opacity:0; 
    } 
} 
@-moz-keyframes sh-tada { 
    10% { 
    opacity:1; 
    } 
    80% { 
    opacity:1; 
    } 
    100% { 
    opacity:0; 
    } 
} 

@keyframes sh-tada { 
    10% { 
    opacity:1; 
    } 
    80% { 
    opacity:1; 
    } 
    100% { 
    opacity:0; 
    } 
} 

.sh-tada { 
    opacity:0; 
    -webkit-animation: sh-tada 2s linear 1; 
    -moz-animation: sh-tada 2s linear 1; 
    animation: sh-tada 2s linear 1; 
}