<div class="panoramic"></div>
.panoramic {
  width: 150px; 
  height: 150px;
  background: url("https://www.w3cplus.com/sites/default/files/blogs/2015/1507/naxos-greece-big.jpg");
  background-size: auto 100%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}
.panoramic:hover,
.panoramic:focus {
  animation-play-state: running;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.