.soccer {
  z-index:9999;
  background: url(Soccer_ball.svg);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
  position: absolute;
  -webkit-animation:roll 4.5s infinite;
  -moz-animation:roll 4.5s infinite;
  animation:roll 4.5s infinite;
}

@-moz-keyframes roll {
  0% {left:0px; -webkit-transform: rotate(-360deg);}
  50% {left:300px; -webkit-transform: rotate(360deg);}
  100% {left:0px; -webkit-transform: rotate(-360deg);}
}
@-webkit-keyframes roll {
  0% {left:0px; -webkit-transform: rotate(-360deg);}
  50% {left:300px; -webkit-transform: rotate(360deg);}
  100% {left:0px; -webkit-transform: rotate(-360deg);}
}

@keyframes roll {
  0% {left:0px; -webkit-transform: rotate(-360deg);}
  50% {left:300px; -webkit-transform: rotate(360deg);}
  100% {left:0px; -webkit-transform: rotate(-360deg);}
}