我们可以在css3动画中移动背景图片吗？

Question

我们可以通过使用css3动画来移动背景图片而不是移动div吗？

例如：

div{ 
width:800px; 
position:relative; 
background:url(image) no-repeat; 
border:1px solid red; 
-webkit-animation: mov 5s infinate; 
} 

@-webkit-keyframes mov{ 
from{ top:0px left: 500px;} 
to{ top:500px; left:500px;} 
} 

在这种情况下，格将移动到left:500px;难道我们只移动背景图片？

感谢您的回答。

Answer 1

你当然可以，只需要使用background-position属性：

@keyframes mov { 
    0% { background-position: 0 0; } 
    100% { background-position: 100% 100%; } 
}

Answer 2

而不是设置顶部和左侧的属性，设置背景位置-x和背景的位置-Y属性。这两个代表背景的“偏移”，因此设置它们会移动背景。