Starting CSS Animation text from the current location instead of 0 width

advertisements

I am new to CSS Animations and am trying to get a text typing effect. I achieved it using references from various online tutorials.

Problem: When I am adding this div inside my website container say 900px width with all things align to center, the animation starts from 0 px width, gets completed and awkwardly slides to align in the center.

I want the animation not to slide to center but rather start from the to be center position and end gracefully.

This is my code:

body {
  width: 900px;
  text-align: center;
}
.typetext {
  /*  color: lime; */
  /*  font-family: "Courier";*/
  font-size: 20px;
  /*  margin: 10px 0 0 10px;*/
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 4s steps(60, end);
}
.typetext:nth-child(2) {
  animation: type2 8s steps(60, end);
}
@keyframes type {
  from {
    width: 0;
  }
}
@keyframes type2 {
  0% {
    width: 0;
  }
  50% {
    width: 0;
  }
  100% {
    width: 100;
  }
}
<body>
  <div class="row lead typetext" id="anim5" style="clear:both; padding-top:10px; font-size:25px; font-weight:600;">
    <div style="width: 100%; margin: 0 auto;">Getting you investment ready and focused on growth</div>
  </div>
</body>

Please guide


See jsfiddle

body {

text-align:center;
}
.typetext {
  /*  color: lime; */
  /*  font-family: "Courier";*/
  font-size: 20px;
  /*  margin: 10px 0 0 10px;*/
  white-space: nowrap;
  overflow: hidden;

  -webkit-animation: type 5s;
}
@keyframes type {

0% {width: 0px;margin:0 auto;}
  100% {width: 100%; margin:0 auto;}
}
<body>
  <div class="row lead typetext"  style="padding-top:10px; font-size:25px; font-weight:600;">
    <div>Getting you investment ready and focused on growth</div>
  </div>
</body>