<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
This Pen doesn't use any external CSS resources.