:root {
--marquee-width: 100%;
--marquee-height: auto;
--marquee-elements-displayed: 4;
--marquee-elements-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
--marquee-animation-duration: calc(var(--marquee-elements) * 5s);
}
.marquee {
background-color: #fff;
color: tomato;
height: var(--marquee-height);
width: var(--marquee-width);
overflow: hidden;
position: relative;
}
.marquee-content-items {
list-style: none;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
margin: 0;
-webkit-animation: scrolling 10s linear infinite;
animation: scrolling 10s linear infinite;
-webkit-animation-duration: var(--marquee-animation-duration);
animation-duration: var(--marquee-animation-duration);
}
.marquee-content-items li {
width: var(--marquee-elements-width);
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 5rem;
white-space: nowrap;
}
.marquee::before, .marquee::after {
position: absolute;
top: 0;
width: 10rem;
height: 100%;
content: "";
z-index: 1;
}
.marquee::before {
left: 0;
background: -webkit-gradient(linear, left top, right top, from(#fff), to(transparent));
background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.marquee::after {
right: 0;
background: -webkit-gradient(linear, right top, left top, from(#fff), to(transparent));
background: linear-gradient(to left, #fff 0%, transparent 100%);
}
@-webkit-keyframes scrolling {
0% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw);
}
100% {
-webkit-transform: translateX(calc(-1 * var(--marquee-elements-width) * var(--marquee-elements)));
transform: translateX(calc(-1 * var(--marquee-elements-width) * var(--marquee-elements)));
}
}
@keyframes scrolling {
0% {
-webkit-transform: translateX(0vw);
transform: translateX(0vw);
}
100% {
-webkit-transform: translateX(calc(-1 * var(--marquee-elements-width) * var(--marquee-elements)));
transform: translateX(calc(-1 * var(--marquee-elements-width) * var(--marquee-elements)));
}
}