css background image slide animation
The html is below:
<div class="wrapper">
<div class="sliding-background"></div>
</div>
.wrapper {
overflow: hidden;
}
.sliding-background {
background: url("..path/to/image") repeat-x;
height: 500px;
width: 5076px;
animation: slide 60s linear infinite;
}
@keyframes .slide {
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0);
}
}