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

CSS动画背景不起作用

1 个答案: