This project implements a sliding text animation with html and css only from Darkcode. Just click on the button Run Pen to see how it works:
How to create a sliding text animation
Step 1: Add Html
<div class="animated-text">
<div class="line">Hi Guys</div>
<div class="line">Welcome</div>
<div class="line">In This</div>
<div class="line">Tutorial</div>
</div>Step 2: Add CSS
body {
margin: 0;
padding: 0;
font-family: montserrat, sans-serif;
background: black;
}
.animated-text {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2980b9;
padding: 0 40px;
height: 60px;
overflow: hidden;
}
.line {
text-transform: uppercase;
text-align: center;
font-size: 40px;
line-height: 60px;
}
.line:first-child {
animation: anim 12s infinite;
}
@keyframes anim {
0% {
margin-top: 0;
}
16% {
margin-top: -60px;
}
33% {
margin-top: -120px;
}
50% {
margin-top: -180px;
}
66% {
margin-top: -120px;
}
82% {
margin-top: -60px;
}
100% {
margin-top: 0;
}
}