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 前缀(仍然是 require 它):

.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;    
}