CSS动画在Chrome中不起作用

我插入了一些CSS动画。他们在FireFox中工作正常，但不是Chrome。有没有解决这个问题的方法？CSS动画在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; } 
    }

来源

2014-03-03 ServerSideSkittles

对于Chrome和Safari关键帧，你需要使用Webkit前缀：

@-webkit-keyframes

来源

2014-03-03 02:30:32

CSS动画在Chrome中不起作用

回答

相关问题