.scrolling_banner {
--banner-width: 300px;
--banner-height: 200px;
--banner-margin-bottom: 10px;
--banner-margin-right: 5px;
--banner-items: 6;
--banner-duration: 2s;
}
.container {
width: 100%;
overflow: hidden;
}
.scrolling_banner {
height: var(--banner-height);
width: calc((var(--banner-width) + var(--banner-margin-right)) * var(--banner-items));
margin-bottom: calc(var(--banner-margin-bottom)/ 2);
font-size: 0
}
.scrolling_banner * {
margin-bottom: var(--banner-margin-bottom);
margin-right: var(--banner-margin-right);
height: var(--banner-height);
width: var(--banner-width);
}
.first {
-webkit-animation: bannermove var(--banner-duration) linear infinite;
-moz-animation: bannermove var(--banner-duration) linear infinite;
-ms-animation: bannermove var(--banner-duration) linear infinite;
-o-animation: bannermove var(--banner-duration) linear infinite;
animation: bannermove var(--banner-duration) linear infinite
}
@keyframes bannermove {
0% {
margin-left: 0
}
100% {
margin-left: calc((var(--banner-width) + var(--banner-margin-right)) * -1)
}
}