.marquee {
overflow:hidden;
text-align:left;
}
.marquee.marquee-speed-drowsy:before {
animation-duration:120s;
}
.marquee.marquee-speed-slow:before {
animation-duration:20s;
}
.marquee.marquee-speed-custom:before {
animation-duration:inherit;
}
.marquee.marquee-speed-normal:before {
animation-duration:10s;
}
.marquee.marquee-speed-fast:before {
animation-duration:7s;
}
.marquee.marquee-speed-swift:before {
animation-duration:5s;
}
.marquee.marquee-speed-hyper:before {
animation-duration:2s;
}
@keyframes movement-smooth {
from {
transform:translateX(0%);
left:100%;
}
to {
transform:translateX(-100%);
left:0;
}
}
@keyframes movement-steps20 {
0% {
transform:translateX(0%);
left:100%;
}
5%, 9.99% {
transform:translateX(-5%);
left:95%;
}
10%, 14.99% {
transform:translateX(-10%);
left:90%;
}
15%, 19.99% {
transform:translateX(-15%);
left:85%;
}
20%, 24.99% {
transform:translateX(-20%);
left:80%;
}
25%, 29.99% {
transform:translateX(-25%);
left:75%;
}
30%, 34.99% {
transform:translateX(-30%);
left:70%;
}
35%, 39.99% {
transform:translateX(-35%);
left:65%;
}
40%, 44.99% {
transform:translateX(-40%);
left:60%;
}
45%, 49.99% {
transform:translateX(-45%);
left:55%;
}
50%, 54.99% {
transform:translateX(-50%);
left:50%;
}
55%, 59.99% {
transform:translateX(-55%);
left:45%;
}
60%, 64.99% {
transform:translateX(-60%);
left:40%;
}
65%, 69.99% {
transform:translateX(-65%);
left:35%;
}
70%, 74.99% {
transform:translateX(-70%);
left:30%;
}
75%, 79.99% {
transform:translateX(-75%);
left:25%;
}
80%, 84.99% {
transform:translateX(-80%);
left:20%;
}
85%, 89.99% {
transform:translateX(-85%);
left:15%;
}
90%, 94.99% {
transform:translateX(-90%);
left:10%;
}
95%, 99.99% {
transform:translateX(-95%);
left:5%;
}
100% {
transform:translateX(-100%);
left:0;
}
}
@keyframes movement-steps10 {
0% {
transform:translateX(0%);
left:100%;
}
10%, 19.99% {
transform:translateX(-10%);
left:90%;
}
20%, 29.99% {
transform:translateX(-20%);
left:80%;
}
30%, 39.99% {
transform:translateX(-30%);
left:70%;
}
40%, 49.99% {
transform:translateX(-40%);
left:60%;
}
50%, 59.99% {
transform:translateX(-50%);
left:50%;
}
60%, 69.99% {
transform:translateX(-60%);
left:40%;
}
70%, 79.99% {
transform:translateX(-70%);
left:30%;
}
80%, 89.99% {
transform:translateX(-80%);
left:20%;
}
90%, 99.99% {
transform:translateX(-90%);
left:10%;
}
100% {
transform:translateX(-100%);
left:0;
}
}
@keyframes movement-steps5 {
0%, 19.99% {
transform:translateX(0%);
left:100%;
}
20%, 39.99% {
transform:translateX(-20%);
left:80%;
}
40%, 59.99% {
transform:translateX(-40%);
left:60%;
}
60%, 79.99% {
transform:translateX(-60%);
left:40%;
}
80%, 99.99% {
transform:translateX(-80%);
left:20%;
}
100% {
transform:translateX(-100%);
left:0;
}
}
.marquee.marquee-movement-smooth:before {
animation-name:movement-smooth;
}
.marquee.marquee-movement-steps20:before {
animation-name:movement-steps20;
}
.marquee.marquee-movement-steps10:before {
animation-name:movement-steps10;
}
.marquee.marquee-movement-steps5:before {
animation-name:movement-steps5;
}
.marquee.marquee-direction-left:before, .marquee.marquee-direction-normal:before {
animation-direction:normal;
}
.marquee.marquee-direction-alternate:before {
animation-direction:alternate;
}
.marquee.marquee-direction-right:before, .marquee.marquee-direction-reverse:before {
animation-direction:reverse;
}
.marquee:before {
content:attr(data-marquee);
white-space:nowrap;
position:relative;
transform:translateX(-50%);
display:inline-block;
left:50%;
animation:linearinfinite;
animation-duration:10s;
animation-name:movement-smooth;
animation-direction:normal;
}