El efecto máquina de escribir solo con CSS está muy piola y es recontra simple, es aconsejable utilizar SASS…

La idea es "jugar" con los pseudoelementos ::beffore y ::after. Voy a dar un ejemplo con la palabra "hola":

1@keyframes](https://ed.team/u/
2@keyframes)](https://ed.team/u/
3@keyframes) maquina {
4    0% {
5        content: "H"
6    }
7    20% {
8        content: "HO"
9    }
10    40% {
11        content: "HOL"
12    }
13    0% {
14        content: "HOLA"
15    }
16}
17
18.escribir::beffore {
19    content: "";
20	animation: maquina 5s infinite;
21}

Lo que nos faltaría es agregar en el documento HTML una etiqueta con la clase escribir:

1<div class="escribir"></div>

Pero, si deseamos añadirle el efecto a una frase grande, es preferible generarlo con SASS:

Primero creamos la variable $content.

Segundo, en el @keyframe recorremos con un @for donde el índice recorre de 0 a 100.

Tercero, los porcentajes será interpolando la variable: ${i}%

Cuarto, en SASS existen dos módulos que utilizaremos:

• str-length($variable) devuelve la cantidad de caracteres que tiene una variable, en JavaScript sería: variable.lenght
• str-slice($variable, principio, final) devuelve el rango deseado de una variable, en JavaScript sería: variable.slice(principio, fin)

Quinto, añadimos una condición que, si el índice es menor a la cantidad de caracteres que contiene la variable $content, solo se muestre desde el primer caracter hasta el número del índice y, en caso contrario, muestre la variable completa.

1$content: "Comienza a estudiar gratis en EDteam y descubre porqué en español nadie te explica mejor";
2
3@keyframes maquina {
4  [@for](https://ed.team/u/for) $i from 0 through 100 {
5    #{$i}% {
6      [@if](https://ed.team/u/if) $i < str-length($content) {
7        content: str-slice($content, 1, $i);
8          }
9      [@else](https://ed.team/u/else) {
10        content: $content;
11          }
12      }
13    }
14  }
15
16div::before {
17  content: "";
18  animation: maquina 5s infinite;
19}