.marquee {
overflow: hidden;
position: relative;
}
.marquee::after {
content: "";
white-space: nowrap;
display: inline-block;
}
.marquee > .marquee-inner {
position: absolute;
top: 0;
white-space: nowrap;
animation-name: marquee;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.marquee > .marquee-inner:hover {
animation-play-state: paused;
cursor: default;
}
@keyframes marquee {
0% { left: 100%; transform: translate(0); }
100% { left: 0; transform: translate(-100%); }
}