46 lines
724 B
CSS
46 lines
724 B
CSS
.marquee {
|
|
width: 450px;
|
|
margin: 0 auto;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.marquee span {
|
|
display: inline-block;
|
|
padding-left: 100%;
|
|
/* show the marquee just outside the paragraph */
|
|
animation: marquee 15s linear infinite;
|
|
}
|
|
|
|
|
|
/* Make it move */
|
|
|
|
@keyframes marquee {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
transform: translate(-100%, 0);
|
|
}
|
|
}
|
|
|
|
.blink {
|
|
animation: blink-animation 1s steps(5, start) infinite;
|
|
-webkit-animation: blink-animation 1s steps(5, start) infinite;
|
|
}
|
|
@keyframes blink-animation {
|
|
to {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
@-webkit-keyframes blink-animation {
|
|
to {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|