CSS动画背景无法工作

Question

我的动画背景不动..。我不知道为什么..。

图像看上去很正常，但什么也没动.

我的HTML：

<div class="section1">
</div>

我的CSS：

@keyframes animatedBackground {    
    0% { background-position: 0 0; }    
    100% { background-position: 100% 0; }    
}    
@-moz-keyframes animatedBackground {    
    0% { background-position: 0 0; }    
    100% { background-position: 100% 0; }    
}    
@-webkit-keyframes animatedBackground {    
    0% { background-position: 0 0; }    
    100% { background-position: 100% 0; }    
}    
@-ms-keyframes animatedBackground {    
    0% { background-position: 0 0; }    
    100% { background-position: 100% 0; }    
}    
@-o-keyframes animatedBackground {    
    0% { background-position: 0 0; }    
    100% { background-position: 100% 0; }    
}    


.section1       {     
    background-image: url(mosaic.jpg);    
    background-position: 0px 0px;    
    background-repeat: repeat-x;    
    animation: animatedBackground 40s linear infinite;    
}

任何帮助都将不胜感激..。谢谢

Answer 1

尝试为Safari、Chrome和Opera添加-webkit前缀(仍然是要求前缀)：

.section1    {     
    background-image: url(mosaic.jpg);    
    background-position: 0px 0px;    
    background-repeat: repeat-x;    
   -webkit-animation: animatedBackground 40s linear infinite;  
    animation: animatedBackground 40s linear infinite;    
}