Infinite sliding image

index.html

<div class="slider">
  <div class="slider-row"></div>
</div>

Infinite sliding image.markdown

Infinite sliding image

A Pen by Jake Albaugh on CodePen.

License.

style.css

$img-w: 5912px;
$img-h: 389px;
$shrink: 2;
$ratio: 1 / $shrink;
$speed: 50s;

.slider {
  position: absolute;
  width: 100%;
  top: calc(50% - #{$img-h * $ratio / 2});
  overflow: hidden;
  .slider-row {
    width: $img-w * $ratio;
    height: $img-h * $ratio;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/ubiquity-summit-web-01.png);
    background-size: $img-w * $ratio $img-h * $ratio;
    animation: slide $speed linear infinite;    
  }
}

@keyframes slide {
  from { background-position-x: 0; }
  to   { background-position-x: -$img-w * $ratio; }
}