<div class="marquee">
<span>Top down...</span>
</div>
.marquee {
height: 100px;
overflow: hidden;
position: relative;
}
.marquee span {
font-size: 2em;
position: absolute;
color: green;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform: translateY(-100%);
animation: cssmarquee 5s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.