Можем ли мы переместить фоновое изображение в анимации CSS3?

Question

Можем ли мы переместить фоновое изображение вместо перемещения div с помощью анимации css3?

Например:

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

В этом случае div переместится на left:500px; Можем ли мы переместить только фоновое изображение?

Благодаря вашим ответам.

Answer 1

Вы, конечно, можете, просто используйте свойство background-position:

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

Answer 2

Вместо установки атрибутов top и left, установите атрибуты background-position-x и background-position-y. Эти два представляют «смещение» фона, поэтому их установка будет перемещать фон.