keyy

<div class="d1"></div>

<div class="d2"></div>

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

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

}