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  style="margin-left: auto; margin-right:auto">
      <h1  >Hi I'm Raffiel</h1>
      <div  style="display: block; position:relative;">
        <h1 style="font-size: 45px ;">I am, &nbsp;
        <div  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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div  style="text-align:center">
  <h1 >Hi I'm Raffiel</h1>
  <div >
    <h1 style="font-size: 45px ;height:50px; line-height:50px ">I am,
      <div  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>

CodePudding user response：

try this

@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  style=" width:100%; margin: auto;">
      <h1  style="text-align:center;" >Hi I'm Raffiel</h1>
      <div  style="display: block; text-align:center;">
        <h1 style="font-size: 45px;">I am,
        <div  style=" 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; ">
            Graphic Designer<br>
            Digital Marketer<br>
            Video Editor<br>
            Web Designer<br>
          </span>
        </div>
          </h1>
      </div>
    </div>