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

Для ключевых кадров в хроме и сафари вы должны использовать WebKit префикс:

@-webkit-keyframes