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