| 1 |
.marquee { |
| 2 |
overflow: hidden; |
| 3 |
position: relative; |
| 4 |
} |
| 5 |
.marquee::after { |
| 6 |
content: ""; |
| 7 |
white-space: nowrap; |
| 8 |
display: inline-block; |
| 9 |
} |
| 10 |
.marquee > .marquee-inner { |
| 11 |
position: absolute; |
| 12 |
top: 0; |
| 13 |
white-space: nowrap; |
| 14 |
animation-name: marquee; |
| 15 |
animation-timing-function: linear; |
| 16 |
animation-iteration-count: infinite; |
| 17 |
} |
| 18 |
.marquee > .marquee-inner:hover { |
| 19 |
animation-play-state: paused; |
| 20 |
cursor: default; |
| 21 |
} |
| 22 |
@keyframes marquee { |
| 23 |
0% { left: 100%; transform: translate(0); } |
| 24 |
100% { left: 0; transform: translate(-100%); } |
| 25 |
} |
| 26 |
|
