Efecto máquina de escribir con CSS

Cuando rediseñé esta web para centrarla en los servicios de formación a desarrolladores web, quise poner en el tagline de la página de inicio un subtítulo con el llamado efecto máquina de escribir (typewriter effect).

Como iba con prisas y no quería o podía perder tiempo en según que detalles, utilicé un plugin (Animated Typing Effect) para poder hacer ese efecto, pero ya con la idea de sustituirlo en cuanto tuviera un poco de tiempo, ya que desde el principio me pareció excesivo e innecesario instalar un plugin sólo para eso.

Unos cuantos meses después… he recordado que me quedó pendiente hacerlo y he sustituido el plugin por un poco de código CSS que consigue el mismo efecto de forma mucho más ligera.

Estuve buscando y existen diferentes formas de hacerlo, la mayoría usando alguna librería de JavaScript o jQuery, cosa que intenté evitar, y finalmente después de probar algunas me quedé con ésta:

Código original para utilizarlo en un texto de 3 párrafos:

.css-typing p {
  border-right: .15em solid orange;
  font-family: "Courier";
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.css-typing p:nth-child(1) {
  width: 7.3em;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
  width: 11.5em;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
  width: 7.3em;
  opacity: 0;
  -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}
@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}
@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}
@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}
@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: transparent;
  }
}

Código adaptado a una sola línea

.css-typing p {
	  border-right: .15em solid white;
	  white-space: nowrap;
	  overflow: hidden;
}
.css-typing p:nth-child(1) {
	  width: 37em;
	  -webkit-animation: type 5s steps(40, end), blink .5s step-end infinite alternate;
	  animation: type 5s steps(40, end), blink .5s step-end infinite alternate;
	  -webkit-animation-fill-mode: forwards;
	  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes type {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: transparent;
  }
}

See the Pen
Texto animado de una línea CSS by esolalf (@esther_sola)
on CodePen.

El ancho de línea (width) y los pasos de la animación (steps) deberás adaptarlos según la longitud del texto y la velocidad con que quieras que aparezca.

Como ves, es una forma sencilla de añadir detalles animados a tu web o las de tus clientes, llamando la atención sobre algún texto en concreto, aunque recomiendo su uso muy puntual, tanto de ésta como de cualquier otra animación para no saturar y no conseguir el efecto contrario llamando la atención sobre demasiados elementos a la vez.