Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen, despite setting margins (right & left) to auto.
@keyframes animate{
0%,100%{
top:0;
}
20%{
top:0px;
}
25%{
top:-50px;
}
45%{
top:-50px;
}
50%{
top:-100px;
}
70%{
top:-100px;
}
75%{
top:-150px;
}
95%{
top:-150px;
}
}<div class="container " style="margin-left: auto; margin-right:auto">
<h1 class="display-4 w3-center w3-animate-right" >Hi I'm Raffiel</h1>
<div class="outer " style="display: block; position:relative;">
<h1 style="font-size: 45px ;">I am,
<div class="inner" style="position:absolute; border:0px solid #ddd; height:50px; line-height:50px; font-size:45px; text-transform:uppercase; overflow:hidden; display:inline-block; text-align: left; font-weight: 400;">
<span style="animation:animate 10s ease infinite; position:relative;color:#e58e26; text-align: left;">
Graphic Designer<br>
Digital Marketer<br>
Video Editor<br>
Web Designer<br>
</span>
</div>
</h1>
</div>
</div>This is strong text!