<div class="container">
<div class="stuff">
<div class="scroll">
</div>
<div class="scroll">
</div>
<div class="scroll">
</div>
</div>
</div>
@import "compass/css3";

@keyframes pull {
	from { transform: translate3d(0, 0, 0); }
	to {transform: translate3d(-6194px, 0 ,0);}
}

@keyframes test{
0% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-1.jpg');
}
15%{
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-1.jpg');
}
16% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-2.jpg');
}
30% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-2.jpg');
}
31% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-3.jpg');
}
45% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-3.jpg');
}
46% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-4.jpg');
}
60% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-4.jpg');
}
61% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-5.jpg');
}
75% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-5.jpg');
}
76% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-6.jpg');
}
90% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-6.jpg');
}
98% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-6.jpg');
}
99% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-1.jpg');
}
100% {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-1.jpg');
}

}

.container{
  width:100%;
  height:563px;
  background:#ecf0f1;
  overflow:hidden;
}
.stuff{
  width:9291px;
  height:563px;
  animation: pull 100s linear infinite;
}
.scroll	{
	width: 3097px; 
	height: 563px;
  float:left;
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/43033/tile-1.jpg); 
  animation: test 20s linear infinite;
  
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js