css background image slide animation

Solutions on MaxInterview for css background image slide animation by the best coders in the world

showing results for - "css background image slide animation"
Effie
05 Jan 2018
1The html is below:
2<div class="wrapper">
3  <div class="sliding-background"></div>
4</div>
5
6
7
8.wrapper {
9  overflow: hidden;
10}
11
12.sliding-background {
13  background: url("..path/to/image") repeat-x;
14  height: 500px;
15  width: 5076px;
16  animation: slide 60s linear infinite;
17}
18@keyframes .slide {
19  0%{
20    transform: translate3d(0, 0, 0);
21  }
22  100%{
23    transform: translate3d(-1692px, 0, 0);
24  }
25}