1.scrolling_banner {
2  --banner-width: 300px;
3  --banner-height: 200px;
4  --banner-margin-bottom: 10px;
5  --banner-margin-right: 5px;
6  --banner-items: 6;
7  --banner-duration: 2s;
8}
9
10.container {
11  width: 100%;
12  overflow: hidden;
13}
14
15.scrolling_banner {
16  height: var(--banner-height);
17  width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items));
18  margin-bottom: calc(var(--banner-margin-bottom)/ 2);
19  font-size: 0
20}
21
22.scrolling_banner * {
23  margin-bottom: var(--banner-margin-bottom);
24  margin-right: var(--banner-margin-right);
25  height: var(--banner-height);
26  width: var(--banner-width);
27}
28
29.first {
30  -webkit-animation: bannermove var(--banner-duration) linear infinite;
31  -moz-animation: bannermove var(--banner-duration) linear infinite;
32  -ms-animation: bannermove var(--banner-duration) linear infinite;
33  -o-animation: bannermove var(--banner-duration) linear infinite;
34  animation: bannermove var(--banner-duration) linear infinite
35}
36
37@keyframes bannermove {
38  0% {
39    margin-left: 0
40  }
41  100% {
42    margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1)
43  }
44}