1#ticker {
2 position: fixed;
3 top: 58px;
4 background: #ff4a6c;
5 width: 100vw;
6 color: white;
7 font-size: 24px;
8 overflow: clip;
9}
10
11#ticker-text{
12 animation: ticker-text-scroll 8s linear 0s infinite;
13 overflow: clip;
14 width: 150vw;
15}
16
17@keyframes ticker-text-scroll {
18 0% {
19 transform: translateX(150vw);
20 }
21 100% {
22 transform: translateX(-150vw);
23 }
24}
25
26/* Mobile specific */
27@media only screen and (hover: none) and (pointer: coarse) {
28 #ticker {
29 top: unset;
30 bottom: 0px;
31 font-size: 64px;
32 }
33 #ticker-text{
34 width: 2800px;
35 }
36 @keyframes ticker-text-scroll {
37 0% {
38 transform: translateX(2800px);
39 }
40 100% {
41 transform: translateX(-2800px);
42 }
43}
44}