<div class="typewriter">
  <div class="alpha-block-1 type-blocks">
    <h1 class="type-1">Front-End.</h1>
  </div>

  <div class="alpha-block-2 type-blocks">
    <h1 class="type-2">UI/UX.</h1>
  </div><div class="alpha-block-3 type-blocks">
    <h1 class="type-3">Design.</h1>
  </div><div class="alpha-block-4 type-blocks"><h1 class="type-4">Engineering.</h1></div><div class="alpha-block-5 type-blocks"><h1 class="type-5">Design. Engineering.</h1>
  </div>
</div>

/* .typewriter {
 width: 55%;
} */


.type-blocks {
  display: inline-block; 
  font-family: monospace;
  font-size: 2em;
  white-space: nowrap;
}


.alpha-block-1 {
/*   background-color: #ccc; */
  opacity: 1;
}


.alpha-block-2 {
/*   background-color: grey; */
  animation: 
    opacity 1s 4s steps(1,end) backwards;
}

.alpha-block-3 {
/*   background-color: pink; */
  animation: 
    opacity 1s 7s steps(1,end) backwards;
}

.alpha-block-4 {
/*   background-color: tomato; */
  animation: 
    opacity 1s 10s steps(1,end) backwards;
}


.alpha-block-5 {
/*   background-color: blue; */
  width: auto;
  animation: 
    opacity 1s 13.5s steps(1,end) backwards;
}

.type-1 {
  overflow: hidden;
  border-right: .15em solid orange;
  float: left;
  margin: 0 auto;
  animation: 
    typing 2.5s steps(10,end),
    blink .75s 0s 6 step-end forwards;
}

.type-2 {
  overflow: hidden;
  border-right: .15em solid orange;
  float: left;
  margin: 0 auto;
  animation: 
    typing 3s 4s steps(10,end),
    blink .75s 4s 5 step-end forwards;   
}

.type-3 {
  overflow: hidden;
  border-right: .15em solid orange;
  float: left;
  margin: 0 auto;
  animation: 
    typing2 3s 7s steps(10,end) forwards,
    blink .75s 7s 5 step-end forwards;   
}

.type-4 {
  overflow: hidden;
  border-right: .15em solid orange;
  float: left;
  margin: 0 auto;
  animation: 
    typing2 4s 10s steps(10,end) forwards,
    blink .75s 10s  5 step-end forwards;   
}

.type-5 {
  overflow: hidden;
  border-right: .15em solid orange;
  float: left;
  margin: 0 auto;
  animation: 
    typing 3.5s 13.5s steps(12,end) forwards,
    blink .75s 13.5s step-end infinite;   
}



@keyframes typing{
  0% { width: 0 }
  100% { width: 100% }
}


@keyframes typing2 {
  from, to { width: 0 }
  75% { width: 100% }
}


@keyframes opacity {
  0% { opacity: 0 }
  100% { opacity: 1}
  
}

@keyframes blink {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.