Mecanografía animada CSS

Estoy intentando hacer una animación como si estuviera escribiendo. Para lograr esto estoy usando ‘pasos’ de animación CSS.

La animación en sí funciona bien. Sin embargo, si quiero animar múltiples líneas de texto, todas comienzan a jugar al mismo tiempo. Lo cual no me está dando el efecto deseado. (Intenté usar
en una sola

, que cortó el texto, pero nuevamente comencé las animaciones simultáneamente).

Para contrarrestar esto, pongo la siguiente línea de texto en un

y establezco un retraso de animación para cada línea de texto. Lo que funciona, pero el texto está visible antes de que comience la animación.

Quiero que el texto se oculte hasta que la animación comience a reproducirse, para obtener realmente ese efecto de “tipeo en vivo”.
¿Alguien tiene alguna idea sobre cómo puedo lograr esto?

HTML

 

Hi there! My name is Jeff.

And I create cool stuff.

CSS

 .content h1 { background:white; opacity:0.7; white-space:nowrap; overflow:hidden; border-right: 3px solid black; -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end 2s; } .content h2 { background:white; opacity:0.7; white-space:nowrap; overflow:hidden; border-right: 3px solid black; -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite; -webkit-animation-delay:3s; } @-webkit-keyframes typing { from { width: 0; } to { width:400px; } } @-webkit-keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } } 

jsFiddle

Gracias por adelantado.

La solución más simple es agregar:

 animation-fill-mode:both; 

a su h2 (con los prefijos necesarios). De esta forma, no está estableciendo un ancho cero fuera de su animación, por lo que los navegadores que no son compatibles con este CSS mostrarán el encabezado (que supongo que es lo que busca). Mira este violín .

El modo animación-relleno :

especifica cómo una animación CSS debe aplicar estilos a su objective antes y después de que se ejecute

Configurarlo en both casos significa que su h2 tendrá un ancho de 0 antes de que comience a ejecutarse, y un ancho de 400px después.

Como los comentarios ya incluyen una solución, tal vez esta sea otra forma de hacerlo: mediante el uso de tiempos de espera y la configuración de la visibility: hidden al principio (para simplificar, utilicé jQuery para establecer la visibilidad).

Incluye la siguiente regla de CSS:

 .content { visibility: hidden; } 

Como JavaScript, tendrías:

 window.setTimeout(function() { $('#contentdiv h1').css('visibility', 'visible'); }, 100); window.setTimeout(function() { $('#contentdiv h2').css('visibility', 'visible'); }, 3100); 

Ver el jsFiddle

 p { font:500 22px consolas; width:20ch; white-space:nowrap; overflow:hidden; animation:type 5s steps(20) infinite; } @keyframes type { 0%{ width:0; } } 
 

Text Type Animation

No es exactamente la pregunta del OP, pero en caso de que alguien más lo encuentre útil:

Quería poder tipear-animar un parágrafo de texto, una sola etiqueta

que podría contener texto que se envolvería y produciría un número desconocido de líneas reales. Aplicar una animación lineal simple a la etiqueta p sí misma no funcionaría, así que, en cambio, adopté el enfoque de tener varios elementos “ocultos” que cubrirían el párrafo de texto, cada línea en alto, y luego animaría cada uno de esos para que se encojan y revelen los personajes de la línea de texto debajo de ellos.

El HTML se ve así:

 

This paragraph of text will be animated with a "typewriter" style effect, and it will continue to work even if it splits across multiple lines. Well, in this case, up to a maximum of 5 lines, but you get the picture.

 

 

 

 

 

Necesita un contenedor y coloque el elemento .typing y los .hiders usando absolute para que estén uno encima del otro:

 .container { position: relative; font-family: Consolas, monospace; } .typing { position: absolute; top: 0; margin: 0; z-index: -1; } .hiders { margin: 0; position: absolute; top: 0; width: 100%; } 

Y la animación se aplica a cada p dentro de .hiders :

 .hiders p { position: relative; clear: both; margin: 0; float: right; /* makes animation go left-to-right */ width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */ background: white; /* same as page background */ animation: typing 2s steps(30, end); animation-fill-mode: both; /* load first keyframe on page load, leave on last frame at end */ } .hiders p:nth-child(2) { animation-delay: 2s; } .hiders p:nth-child(3) { animation-delay: 4s; /* etc */ 

Aquí está el violín final:

https://jsfiddle.net/hjwp/514cLzxn/

Crédito original para la inspiración: Lea Verou