soy Kseso y esto EsCSS

Efecto texto mecanografiado con Css transition y animation. 4 ejemplos

Explicación de cuatro formas de conseguir con puro css un efecto de texto mecanografiado (aparición del texto letra a letra) o type text.

Efecto texto mecanografiado con Css transition y animation. 4 ejemplos

·Por Kseso ✎ 2

Dos formas distintas de lograr el efecto en un texto de ir apareciendo letra a letra, tal que fuese tipeado con una máquina de escribir, cursor incluido, usando para ello uno de los varios valores de la propiedad transition de Css.

Tal como explicaba en la guía de las transiciones Css la propiedad transition es la forma acortada de declarar un grupo de propiedades.

Entre estas propiedades se encuentra Transition-timing-function. Que es la que controla la forma en como se realiza la transición entre el estado inicial y el final.

Para lograr el efecto que buscamos nos viene al pelo un valor: steps. Este valor, y sus dos variantes, permite obtener un efecto de "a saltos" en vez de forma continua. Si necesitas más info teórica y algún ejemplo mira la guía que te cité antes.

Vamos a ver dos formas distintas pero similares de lograr el texto mecanografiado. La primera realizada por Lea Veru:

Type animation por Lea Veru

Versión 1: con 1 span para el cursor

Esta primera versión se vale de una etiqueta extra para simular el cursor. El etiquetado html es sencillo:

<h1>Typing animation by Lea Verou.<span> </span></h1>

Lo primero y para asegurarse que cada paso de la transición coincide con cada letra es elegir una fuente monospace, por tener cada carácter la misma anchura.

body { font-family: Consolas, monospace; background: #fff; } h1 { position: relative; float: left; font-size:150%; }

A continuación los estilos básicos del cursor: posicionado a la derecha con una anchura de 0 y hacemos que sea su borde el que simule ser el cursor. Y para evitar que el borde sume al tamaño incluimos la propiedad boz-sizing:

h1 span { position:absolute; top:0; right:0; width:0; background: #fff; /* el mismo que el body */ border-left: .1em solid black;

Ya tenemos lo que necesitamos, sólo falta animarlo. Para ello creamos dos animaciones Css. Una para que el texto aparezca letra a letra y otra para el cursor parpadeante:
El cursor:

@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } @keyframes typing { from { width: 100% } to { width:0 } }

Como ves, el efecto en esta primera versión se logra actuando sobre el color del borde del span y sobre su tamaño. A medida que transcurre el tiempo va disminuyendo su tamaño para dejar ver las letras con la siguiente declaración

h1 span { animation: typing 17s steps(30, end), /* nº pasos = nº carácteres */ blink-caret 1s step-end infinite; }

Nota que para que el efecto salga fino, el número de pasos indicados en la animación (30 en el ejemplo) debe ser el mismo que el de carácteres del texto, espacion en blanco incluidos.
Con el uso del valor end en vez del otro posible (star) nos aseguramos de que el primer carácter no aparezca ya impreso.
Variando el valor del tiempo (17s en el ejemplo) se acelera o ralentiza el efecto.

Observa que las dos animaciones que conforman el valor de la transición se eincluyen en la misma declaración de animation separadas por una coma ().

Y aquí el efecto en funcionamiento. Pulsa la ▶ de abajo (junto al signo +) para recargar la animación.

Versión 2: marcado semántico

En esta variación del anterior, la diferencia estriba en que se prescinde del elemento vacío del anterior (el span) y su background. Se modifica el tamaño del h1 que es el que contiene el texto. El cursor sigue siendo su borde.

Pero tiene una contra: se necesita calcular de antemano el el tamaño del h1:

Tercera versión: tamaño con el valor ch

Entre las novedades de la recomendación del W3c "CSS Values and Units Module Level 3" se recoge la unidad ch, a la que define como:

Un ch es igual a la anchura que tenga el dígito cero (0) en la tipografía usada.

Así que sólo hay que declarar una anchura de tantos ch como carácteres tengamos que tipear.

h1 { font: bold 200% Consolas, Monaco, monospace; border-right: .1em solid; width: 16.5em; /* por si no soportan ch */ width: 30ch; /* nº carácteres */ margin: 2em 1em; white-space: nowrap; overflow: hidden; animation: typing 20s steps(30, end), /* nº steps = nº carácteres */ blink-caret .5s step-end infinite alternate; }

Un apunte para quien se inicia: no se declara color en la propiedad border. Por defecto su valor (color) es el de color

En este ejemplo, notarás también que hay una simplificación en las declaraciones de las @animation

@keyframes typing { from { width: 0; } } @keyframes blink-caret { 50% { border-color: transparent; } }

La razón es que los navegadores generan los keyframes from (0%) y to (100%) si faltan.

Type animation en varios párrafos

Este ejemplo obra de @samarkandiy en codepen, basado en los anteriores de Lea Verou, tiene la particularidad de aplicarse a varios elementos. En la demo son dos párrafos:

<p>hi folks, this is typing animation using CSS</p> <p>created with ♥ by <a href="https://twitter.com/@samarkandiy" title="Azik Samarkandiy">@samarkandiy</a> :) <span>|</span></p>

Volvemos a encontrarnos el span para generar el cursor, anchura de los párrafos y la igualdad entre carácteres y nº de pasos.animation

La variación de ejemplo es que introduce un selector avanzado para modificar la animación en el segundo párrafo:

p:nth-child(2){ animation: type2 8s steps(60, end); }

Y el resultado es el que ves:

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso