Puedes tener dos animaciones:
- Una para que parpadee (que ya la tienes creada)
- Otra para que cambie el texto (por crear)
Nota: originalmente había puesto una solución con ::before
/::after
, pero no terminaba de animarse bien en algunos navegadores. Se puede revisar esa solución en el historial.
Puedes tener el texto en varios span
dentro de y entonces mostrar/ocultar cambiando su ancho de 0 a auto (teniendo un overflow: hidden
). Entonces lo que harías sería calcular los tiempos (tienes 6 palabras diferentes, si la animación dura 100% del tiempo, cada palabra deberá estar un 16.6%).
Entonces lo único que quedaría sería ajustar los tiempos de las animaciones para que el parpadeo coincida con el cambio de palabra.
Aquí lo puedes ver funcionando:
.blink_me {
display: inline-block;
vertical-align: bottom;
animation: blinker 1s linear infinite;
animation-delay: -0.5s;
}
.blink_me span {
float: left;
overflow: hidden;
animation: hideShow 6s linear infinite;
}
.blink_me span:nth-child(1) { animation-delay: -0s; }
.blink_me span:nth-child(2) { animation-delay: -1s; }
.blink_me span:nth-child(3) { animation-delay: -2s; }
.blink_me span:nth-child(4) { animation-delay: -3s; }
.blink_me span:nth-child(5) { animation-delay: -4s; }
.blink_me span:nth-child(6) { animation-delay: -5s; }
@keyframes blinker {
50% {
opacity: 0;
}
}
@keyframes hideShow {
0%, 16.6%, 33.33%, 100% { width: 0; }
16.66%, 33.3% { width: auto; }
}
<p>
Here is a sentence
<span class="blink_me" id="rotate">
<span>test1</span>
<span>bob</span>
<span>next</span>
<span>last</span>
<span>PABLO</span>
<span>ANDRES</span>
</span>
is what changes
</p>