Para texto en vivo en una página, CSS steps() es suficiente. Para un archivo que puedas compartir en chats, documentos o diapositivas, usa un creador de GIF en el navegador.
Efecto de máquina de escribir con CSS puro
Para texto de una sola línea en la web, el truco clásico de CSS anima el ancho del elemento con steps() para que las letras parezcan escribirse, mientras un borde derecho hace de cursor:
.typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 0.15em solid currentColor;
width: 0;
animation:
typing 3s steps(11, end) forwards,
blink 0.8s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink {
50% { border-color: transparent; }
}El número de steps(11, end) debe coincidir con los caracteres y 3s define la velocidad. Funciona bien en portadas y títulos, pero el texto multilínea, las fuentes personalizadas y la exportación a un archivo compartible resultan incómodos con CSS puro.
¿Lo necesitas como archivo?
Nuestro creador de GIF de texto mecanografiado exporta la misma animación como GIF en bucle para usarla donde quieras.
Bibliotecas de componentes front-end
Si usas React o Vue, las bibliotecas de componentes ofrecen el efecto listo con propiedades para velocidad, cursor y bucle. Framer incluye variantes de escritura, MagicUI tiene un componente TypingAnimation y paquetes como react-type-animation o typed.js se instalan en un paso.
Para convertir el aspecto del componente en un archivo portable, genera el GIF con el creador gratuito.
Editores de vídeo
Para un acabado más cinematográfico, los editores de vídeo son la ruta tradicional. En CapCut, añade una capa de texto y aplica la animación «Typewriter». En After Effects, una expresión de fotogramas clave de Source Text corta la cadena carácter a carácter y un pequeño rectángulo hace de cursor parpadeante. Ofrecen más control, pero cada cambio exige renderizar.
Si solo necesitas un bucle limpio sin trabajar con la línea de tiempo, el creador de GIF lo genera en segundos.
Creador de GIF online gratis (recomendado)
Para chats, README, publicaciones y documentación, un GIF en bucle es el formato más portable y no requiere software:
- Escribe el texto: hasta 200 caracteres con saltos de línea.
- Elige estilo y velocidad: nueve tipografías, colores personalizados o fondo transparente, cursor, cuatro tamaños de lienzo y cinco velocidades.
- Descarga el GIF: se genera en tu navegador, gratis y sin marca de agua.
Prueba el creador de GIF de texto mecanografiado: funciona en el navegador, en iPhone y Android, sin registro.