El efecto typing con CSS es una animación sencilla, visual y muy reconocible: el texto aparece progresivamente, como si alguien lo estuviera escribiendo en una máquina de escribir o en una terminal. Es un recurso muy utilizado en portfolios, páginas personales, landings, cabeceras creativas y secciones hero donde interesa captar la atención desde el primer vistazo.
Lo interesante de este efecto es que no necesitas JavaScript para conseguirlo. Con unas cuantas líneas de HTML y CSS puedes crear una animación ligera, fácil de personalizar y compatible con la mayoría de proyectos web. Eso sí, como ocurre con cualquier animación CSS, conviene aplicarla con criterio para que no perjudique la legibilidad, el rendimiento ni la accesibilidad.
En este artículo veremos cómo crear un efecto typing CSS paso a paso, cómo funciona la propiedad steps(), cómo añadir un cursor parpadeante, cómo adaptar el efecto a diferentes pantallas y qué buenas prácticas deberías tener en cuenta antes de incluirlo en una web real.
Si estás trabajando una serie de contenidos sobre movimiento en interfaces, este efecto encaja muy bien dentro de una estrategia más amplia sobre animaciones CSS, especialmente si quieres aprender a crear detalles visuales pequeños pero efectivos.
Un efecto typing en CSS, también conocido como efecto máquina de escribir, es una animación que muestra un texto de forma progresiva. En lugar de aparecer completo desde el inicio, el contenido se revela carácter a carácter o por pequeños bloques, generando la sensación de que se está escribiendo en tiempo real.
Este tipo de animación suele combinar tres elementos principales:
- Un texto que inicialmente está oculto.
- Una animación que va ampliando el área visible del texto.
- Un cursor visual, normalmente una línea vertical, que parpadea al final de la frase.
El resultado recuerda a una máquina de escribir clásica, a una consola de comandos o a una interfaz tecnológica. Por eso también se le suele llamar typewriter effect o typing animation CSS.
Aunque puede parecer un detalle puramente decorativo, bien utilizado puede ayudar a destacar una frase importante, reforzar la identidad visual de una página o aportar una sensación de dinamismo sin sobrecargar la interfaz.
El texto animado CSS puede resultar muy atractivo, pero no debería usarse en cualquier parte de una página. Como cualquier recurso visual, debe tener una intención clara.
El efecto typing funciona especialmente bien en:
- La cabecera principal de un portfolio.
- Una landing page con una propuesta de valor breve.
- Un titular destacado dentro de una página de servicios.
- Interfaces con estética de terminal, tecnología o escritura.
- Presentaciones personales donde quieras añadir un punto expresivo.
Por ejemplo, en una página de inicio podrías usar una frase como:
<h1>Creo interfaces web accesibles y cuidadas</h1>
Aplicada con efecto typing, esa frase gana presencia y puede llamar más la atención. Sin embargo, si animas párrafos largos o información demasiado importante, el usuario puede sentirse obligado a esperar para leer. Y eso no siempre es buena idea.
La clave está en usar este recurso en textos breves, relevantes y fáciles de entender. Una animación debería acompañar el contenido, no convertirse en una barrera.
El efecto typing con CSS suele construirse animando el ancho del elemento que contiene el texto. Al principio, ese ancho es 0, por lo que el texto no se ve. Después, el ancho va creciendo hasta mostrar la frase completa.
Para que funcione correctamente, se combinan varias propiedades:
overflow: hidden, para ocultar el texto que queda fuera del ancho visible.white-space: nowrap, para evitar que el texto salte de línea.width, para controlar cuánto texto se muestra.animation, para animar el cambio de ancho.steps(), para que la animación avance por saltos y no de forma fluida.border-righto un pseudo-elemento, para simular el cursor.
Si ya has trabajado antes con @keyframes en CSS, este efecto te resultará bastante familiar. La diferencia principal está en el uso de steps(), que es lo que da esa sensación de escritura carácter a carácter.
La estructura HTML puede ser muy sencilla. Puedes aplicar el efecto directamente sobre un título, un párrafo o un span.
<h1 class="typing">Cómo crear interfaces con personalidad</h1>
También puedes aplicarlo solo a una parte de una frase:
<h1>
Diseño <span class="typing">experiencias digitales</span>
</h1>
Esta segunda opción es muy útil cuando quieres que solo una parte del titular tenga movimiento. Por ejemplo, podrías mantener una frase fija y animar únicamente el concepto principal.
El siguiente código crea un efecto máquina de escribir sencillo, con texto progresivo y cursor parpadeante.
.typing {
display: inline-block;
width: 38ch;
overflow: hidden;
white-space: nowrap;
border-right: 3px solid currentColor;
animation: typing 3s steps(38), blink 0.7s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 38ch;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
Con este bloque ya tienes un efecto typing CSS funcional. El texto se revela poco a poco y el borde derecho actúa como cursor.
Usamos display: inline-block para que el elemento pueda comportarse como texto en línea, pero permita controlar su ancho. Sin esta propiedad, algunos elementos en línea no responderían igual al cambio de width.
display: inline-block;
La propiedad width define cuánto espacio ocupa el texto cuando la animación termina.
width: 38ch;
La unidad ch es muy práctica para este tipo de animación porque se relaciona con el ancho de los caracteres de la fuente. No es una medida perfecta para todos los casos, pero suele funcionar bien en textos de una sola línea.
Esta propiedad oculta la parte del texto que queda fuera del ancho visible.
overflow: hidden;
Sin overflow: hidden, el texto aparecería completo desde el principio y la animación perdería su sentido.
Esta línea evita que el texto salte a una segunda línea.
white-space: nowrap;
En un efecto máquina de escribir básico, normalmente queremos que la frase se mantenga en una sola línea mientras se revela.
El cursor se consigue con un borde derecho.
border-right: 3px solid currentColor;
Usar currentColor permite que el cursor herede el color del texto. Esto es útil si más adelante cambias el color del titular o trabajas con temas claros y oscuros.
La función steps() es una de las claves del efecto typing. Si animáramos el ancho de forma lineal, el texto se revelaría como una cortina horizontal continua. En cambio, steps() divide la animación en saltos.
animation: typing 3s steps(38);
Esto hace que el texto aparezca poco a poco, de una forma más parecida a la escritura real.
El número que colocas dentro de steps() debería coincidir aproximadamente con el número de caracteres del texto. Si la frase tiene 38 caracteres, puedes usar steps(38). Si tiene 24, puedes usar steps(24).
No hace falta que sea exacto al cien por cien, pero cuanto más se acerque el valor al contenido real, más natural se verá la animación.
A continuación tienes un ejemplo completo que puedes adaptar a una sección hero o a un bloque destacado de tu web.
<section class="hero">
<p class="hero__intro">Frontend & UX</p>
<h1 class="hero__title">
<span class="typing">Creo interfaces web con CSS</span>
</h1>
</section>
.hero {
min-height: 60vh;
display: grid;
place-content: center;
text-align: center;
padding: 2rem;
}
.hero__intro {
margin-bottom: 1rem;
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero__title {
margin: 0;
font-size: clamp(2rem, 6vw, 4.5rem);
line-height: 1.1;
}
.typing {
display: inline-block;
width: 29ch;
overflow: hidden;
white-space: nowrap;
border-right: 0.08em solid currentColor;
animation: typing 3s steps(29), blink 0.7s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 29ch;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
Este ejemplo utiliza clamp() para que el tamaño del texto sea más adaptable. Además, el cursor usa em, de modo que su grosor se relaciona con el tamaño de la fuente.
Si te interesa profundizar en qué propiedades conviene animar y cuáles pueden afectar más al rendimiento, puedes revisar esta guía sobre animaciones CSS y rendimiento.
La velocidad del efecto se controla principalmente desde la propiedad animation.
animation: typing 3s steps(29), blink 0.7s step-end infinite;
El valor 3s indica cuánto tarda el texto en escribirse por completo. Si quieres una animación más rápida, puedes reducir ese tiempo:
animation: typing 2s steps(29), blink 0.7s step-end infinite;
Si prefieres un ritmo más pausado, puedes aumentarlo:
animation: typing 4s steps(29), blink 0.7s step-end infinite;
Como referencia, para titulares cortos suele funcionar bien una duración entre 2 y 4 segundos. Si el texto tarda demasiado en aparecer, la animación puede volverse pesada.
El cursor es un detalle pequeño, pero influye mucho en el aspecto final. Puedes hacerlo más fino, más grueso, más rápido o más lento.
Para modificar el grosor, cambia el valor de border-right:
border-right: 2px solid currentColor;
También puedes usar unidades relativas:
border-right: 0.08em solid currentColor;
Esta opción suele integrarse mejor en diseños responsive porque el cursor escala junto con el texto.
La velocidad del parpadeo se controla en la animación blink.
animation: blink 0.7s step-end infinite;
Un valor menor hará que el cursor parpadee más rápido:
animation: blink 0.4s step-end infinite;
Un valor mayor hará que parpadee más despacio:
animation: blink 1s step-end infinite;
En general, conviene evitar un parpadeo demasiado rápido. Puede resultar visualmente agresivo y distraer más de la cuenta.
También puedes hacer que el texto se escriba, permanezca visible durante un momento y luego desaparezca. Para ello, basta con modificar los porcentajes del @keyframes.
<h2 class="typing-loop">Diseño. Desarrollo. Optimizo.</h2>
.typing-loop {
display: inline-block;
width: 28ch;
overflow: hidden;
white-space: nowrap;
border-right: 0.08em solid currentColor;
animation:
typing-loop 6s steps(28) infinite,
blink 0.7s step-end infinite;
}
@keyframes typing-loop {
0% {
width: 0;
}
40% {
width: 28ch;
}
60% {
width: 28ch;
}
100% {
width: 0;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
En este caso, el texto se escribe, se mantiene visible y después se borra. Es una solución útil para una frase fija, aunque si quieres rotar varias frases diferentes quizá te interese combinar CSS con JavaScript.
Para efectos sencillos, CSS es más que suficiente. Para secuencias más complejas, JavaScript te dará más control sobre los tiempos, las pausas y el contenido dinámico.
Uno de los principales problemas del efecto máquina de escribir es que puede romperse en pantallas pequeñas. Como usamos white-space: nowrap, el texto no salta de línea, y eso puede provocar desbordamientos si la frase es demasiado larga.
Para evitarlo, lo mejor es escribir frases breves y comprobar siempre el resultado en móvil.
Puedes controlar mejor el tamaño del texto con clamp():
.typing {
font-size: clamp(1.5rem, 5vw, 3.5rem);
}
De esta forma, el texto se adapta mejor a diferentes anchos de pantalla.
En algunos casos, la mejor decisión es mostrar el texto completo en móvil y desactivar la animación.
@media (max-width: 480px) {
.typing {
width: auto;
white-space: normal;
border-right: 0;
animation: none;
}
}
Esta solución prioriza la legibilidad. El efecto typing puede ser muy atractivo en escritorio, pero si en móvil dificulta la lectura, es mejor simplificarlo.
Las animaciones pueden mejorar una interfaz, pero también pueden generar molestias si se usan sin cuidado. Algunas personas prefieren reducir el movimiento en sus dispositivos por razones de accesibilidad, concentración o comodidad visual.
CSS permite respetar esta preferencia con la media query prefers-reduced-motion.
@media (prefers-reduced-motion: reduce) {
.typing {
width: auto;
overflow: visible;
white-space: normal;
border-right: 0;
animation: none;
}
}
Con esta regla, si el usuario tiene activada la reducción de movimiento, el texto se muestra directamente y la animación se desactiva.
Este detalle es especialmente importante cuando el texto contiene información relevante. El usuario no debería depender de una animación para entender el contenido.
Si quieres profundizar en este tema, puedes leer también la guía sobre prefers-reduced-motion en CSS, donde se explica cómo crear interfaces más respetuosas con las preferencias del usuario.
El texto animado CSS puede aportar personalidad, pero conviene usarlo con moderación. Estas recomendaciones te ayudarán a conseguir un resultado más profesional.
El efecto typing funciona mejor con frases breves. Una línea clara y directa suele tener más impacto que un titular largo que tarda demasiado en escribirse.
Si el mensaje es importante, no obligues al usuario a esperar. La animación debe acompañar la lectura, no retrasarla.
Un cursor parpadeante puede funcionar muy bien en una cabecera, pero varios cursores animados a la vez pueden resultar molestos.
El efecto puede verse perfecto en escritorio y romperse en pantallas pequeñas. Antes de publicarlo, revisa el resultado en diferentes anchos.
Añadir soporte para prefers-reduced-motion es una buena práctica básica cuando trabajas con animaciones. No cuesta mucho y mejora la experiencia de quienes prefieren interfaces más estáticas.
Uno de los errores más habituales es copiar un ejemplo sin adaptar el width ni los steps() al texto real.
width: 40ch;
animation: typing 3s steps(40);
Si tu frase tiene menos caracteres, quedará demasiado espacio vacío. Si tiene más, puede cortarse antes de tiempo.
Sin overflow: hidden, el texto se mostrará completo desde el principio. La animación seguirá existiendo, pero visualmente no parecerá una máquina de escribir.
Este efecto no está pensado para párrafos enteros. Funciona mejor en titulares, frases cortas o pequeños fragmentos destacados.
Si el cursor tiene poco contraste con el fondo, puede pasar desapercibido. Si tiene demasiado peso visual, puede distraer. Lo ideal es que acompañe al texto sin robar protagonismo.
Aunque este efecto es ligero, sigue siendo una animación. Si tu página ya tiene muchos elementos en movimiento, quizá convenga reducir o simplificar. En este sentido, también puede ayudarte revisar cuándo conviene usar transform y opacity en animaciones CSS frente a otras propiedades.
Si quieres aplicar el efecto typing en varios textos, puedes usar variables CSS para controlar el número de caracteres y la duración.
<h1 class="typing" style="--characters: 31; --duration: 3s;">
Animaciones CSS con estilo
</h1>
.typing {
display: inline-block;
width: calc(var(--characters) * 1ch);
overflow: hidden;
white-space: nowrap;
border-right: 0.08em solid currentColor;
animation:
typing var(--duration) steps(var(--characters)),
blink 0.7s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: calc(var(--characters) * 1ch);
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
Esta variante es muy útil si quieres reutilizar el mismo efecto en diferentes componentes. Solo tienes que cambiar --characters y --duration en cada elemento.
Otra forma de crear el cursor es usar un pseudo-elemento ::after. Esta técnica da más control sobre la altura, el grosor y la posición del cursor.
<h1 class="typing typing--cursor">Efecto typing solo con CSS</h1>
.typing {
position: relative;
display: inline-block;
width: 29ch;
overflow: hidden;
white-space: nowrap;
animation: typing 3s steps(29) forwards;
}
.typing--cursor::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 0.08em;
height: 1em;
background: currentColor;
animation: blink-cursor 0.7s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 29ch;
}
}
@keyframes blink-cursor {
50% {
opacity: 0;
}
}
Esta opción puede venir bien si el borde derecho no se ajusta exactamente al diseño que necesitas. Con ::after puedes modificar el alto, la posición y el comportamiento del cursor de forma más precisa.
Una pregunta habitual es si este efecto debería hacerse con CSS o con JavaScript. La respuesta depende del nivel de control que necesites.
CSS es una buena opción cuando:
- El texto es fijo.
- La animación es sencilla.
- No necesitas cambiar frases dinámicamente.
- Buscas una solución ligera.
- Quieres añadir un detalle visual a una sección concreta.
JavaScript puede ser más adecuado cuando:
- Quieres rotar varias frases.
- Necesitas borrar y escribir textos diferentes.
- El contenido viene de una API.
- Quieres controlar pausas y velocidades de forma dinámica.
- Necesitas una animación más interactiva.
Para una cabecera, una frase destacada o un pequeño detalle visual, CSS suele ser suficiente. Para sistemas más complejos, JavaScript ofrece más flexibilidad.
También es importante entender la diferencia entre distintos tipos de animación. Si estás comparando enfoques, puedes revisar este artículo sobre transition vs animation en CSS, donde se explica cuándo conviene usar cada una.
Sí. Puedes crear un efecto typing solo con CSS usando overflow: hidden, white-space: nowrap, una animación sobre width y la función steps(). También puedes añadir un cursor con border-right o con un pseudo-elemento.
steps() divide la animación en saltos. En lugar de revelar el texto de forma fluida, lo muestra por partes, generando una sensación similar a la escritura carácter a carácter.
Depende de la longitud del texto y del diseño. Si la frase es corta, puede funcionar bien. Si el texto se desborda o dificulta la lectura, es mejor desactivar la animación en pantallas pequeñas y mostrar el contenido completo.
Crear un efecto typing con CSS es relativamente sencillo, pero aplicarlo bien requiere algo más que copiar y pegar código. Hay que pensar en la longitud del texto, el ritmo de la animación, el comportamiento responsive, el cursor y la accesibilidad.
El efecto máquina de escribir puede aportar personalidad a una interfaz, especialmente en titulares y secciones hero. Sin embargo, su fuerza está en la sutileza. Cuando se usa en una frase breve y relevante, puede captar la atención sin resultar invasivo. Cuando se aplica a demasiados textos o se alarga demasiado, puede convertirse en una distracción.
CSS nos permite crear movimiento de forma ligera y expresiva, pero el criterio de diseño sigue siendo lo más importante. Una buena animación no es la que más se nota, sino la que aparece en el momento adecuado, con la duración justa y al servicio de un mensaje claro.
Si quieres añadir dinamismo a tu web sin depender de JavaScript, el efecto typing CSS es una opción práctica, visual y fácil de adaptar. Bien utilizado, puede convertir una simple línea de texto en un detalle memorable dentro de la experiencia de usuario.
