<div class="marquee">
<span>Slide-In Text </span>
</div>
.marquee {
height: 50px;
overflow: hidden;
position: relative;
}
.marquee span {
font-size: 2em;
color: green;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
animation: cssmarquee 10s ease-out;
}
@keyframes cssmarquee {
0% {
transform: translateX(200%);
}
100% {
transform: translateX(0%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.