I am <span class="type" style="--n:3">
  <span>
    <span>a CSS Hacker</span>
    <span>an expert web developer</span>
    <span>a lazy person!</span>
  </span>
</span>
<br>
I Like <span class="type" style="--n:4;--d:1s">
  <span>
    <span>hacking with CSS</span>
    <span>watching animes</span>
    <span>time traveling</span>
    <span>healthy food</span>
  </span>
</span>

.type {
  --d:2s; /* duration */
  display:inline-block;
  vertical-align: bottom;
}

.type > span {
  display:grid;
  overflow: hidden;
  height:1.2em;
}

.type span span {
  width:0%;
  max-width:max-content;
  overflow: hidden;
  height:inherit;
  word-break:break-all;
  animation:
    c 0.5s infinite steps(1),  
    t var(--d) linear infinite alternate,
    m calc(var(--d)*2*var(--n)) steps(var(--n)) infinite;
}
.type span span:before {
  content:" ";
  display:inline-block;
}

@keyframes t{
  90%,100% {width:100%}
}

@keyframes c{
  0%,100%{box-shadow:5px 0 0 #0000}
  50%    {box-shadow:5px 0 0 red  }
}

@keyframes m{
  100% {transform:translateY(calc(-100%*var(--n)))}
}


body {
  font-size:40px;
}