Issue
hey I am new to programming and I'm trying the css vertical text slide animator feature, when the feature runs smoothly the text turns out to be disproportionate (not in the middle of the screen) even though I've added 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>
strong text
Solution
Basically it should have been position:relative
in order to take "space" and be included in the text-align:center
. But you still need to fine tune this example.
@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;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container" style="text-align:center">
<h1 class="display-4 w3-center w3-animate-right">Hi I'm Raffiel</h1>
<div class="outer">
<h1 style="font-size: 45px ;height:50px; line-height:50px ">I am,
<div class="inner" style="position:relative; border:0px solid #ddd; height:45px; line-height 45px; 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; ">
Graphic Designer<br>
Digital Marketer<br>
Video Editor<br>
Web Designer<br>
</span>
</div>
</h1>
</div>
</div>
Answered By - IT goldman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.