.animtext.text_1 { animation: text1 }
.animtext.text_2 { animation: text2 }
.animtext.text_3 { animation: text3 }
.animtext.text_4 { animation: text4 }

.animtext {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      display: inline-block;
      animation-duration: 20s;
      animation-timing-function: steps(25, end);
      animation-iteration-count: infinite;
}

.animtext::after {
      content: "|";
      position: absolute;
      right: 0;
      animation: caret infinite;
      animation-duration: 1s;
      animation-timing-function: steps(1, end);
}

@keyframes text1 {
      0%, 50%, 100% { width: 0 }
      10%, 25% { width: 15em }
}

@keyframes text2 {
      0%, 50%, 100% { width: 0 }
      30%, 45% { width: 18em }
}

@keyframes text3 {
      0%, 50%, 100% { width: 0 }
      50%, 65% { width: 6em }
}

@keyframes text4 {
      0%, 50%, 100% { width: 0 }
      70%, 85% { width: 18em }
}


@keyframes caret {

      0%,
      100% {
            opacity: 0;
      }

      50% {
            opacity: 1;
      }
}