我們可以在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屬性。這兩個代表背景的「偏移」，因此設置它們會移動背景。