CSS動畫在Chrome中不起作用

Question

我插入了一些CSS動畫。他們在FireFox中工作正常，但不是Chrome。有沒有解決這個問題的方法？

這是我的代碼，我有一個背景圖像，它移動緩慢。底部有一個動作更快。

body { 
    background-image: url('images/bg.png'); 
    animation: animatedSky 40s linear infinite; 
} 

@keyframes animatedSky { 
    from { background-position: 100% 0; } 
    to { background-position: 0 0; } 
} 

#bottom { 
    width: 100%; 
    height: 40px; 
    background-image: url('images/bottom.png'); 
    background-position: 0px 0px; 
    background-repeat: repeat-x; 
    animation: animatedBackground 8s linear infinite; 
    position: absolute; 
    margin-top: 600px; 
    } 

@keyframes animatedBackground { 
    from { background-position: 100% 0; } 
    to { background-position: 0 0; } 
    } 

Answer 1

對於Chrome和Safari關鍵幀，你需要使用Webkit前綴：

@-webkit-keyframes