Question

Could we move background image instead of moving div by using css3 animation?

For example:

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

In this case div will move to left:500px; Could we move only background image?

Thanks to your answers.

Answer 1

You certainly can, just use the background-position property:

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