<div class="d1"></div>
<div class="d1"></div>
<div class="d2"></div>
.d1 {
.d1 {
display:inline;
float:left;
width:200px;
height:100px;
background:url(http://www.maracujaminds.de/images/m.jpg)center left;
animation: roll-in 20s linear infinite;
animation-play-state: running;
}
.d2 {
display:inline;
float:left;
width:200px;
height:100px;
background:url(http://www.maracujaminds.de/images/m.jpg)center right;
transform: scaleX(-1);
animation: roll-in 20s linear infinite;
animation-play-state: running;
}
@keyframes roll-in {
0% {background-position: bottom left;}
100% {background-position: top right;}
}