Letras de arcoiris

Hola a todos aqui vengo a hacer un pequeño tutorial de como animar letras arcoiris.

Algo asi
Aca esta el resultado por si lo quieren ver mejor
Asi que empezemos:

Primero que nada hay que tener la estructura en HTML para las letras:

<div class="logo">
        <span>R</span><span>A</span><span>I</span><span>N</span><span>B</span><span>O</span><span>W</span><span>S</span>
</div>

Este es el logo de Rainbows y si se preguntan porque hay tantos span encerrando a cada letra es porque estaremos animando cada letra individualmente para dar ese efecto de arcoiris.

En CSS
Una vez que tenemos la estructura en HTML hay que hacer la animacion en CSS:

@keyframes rainbow {
            0%{
                color: #F00;/*Rojo*/
            }20%{
                color: #DBFF00;/*Amarillo*/
            }40%{
                color: #0F0;/*Verde*/
            }60%{
                color: #00E0FF;/*Celeste*/
            }80%{
                color: #00F;/*Azul*/
            }100%{
                color: #F00;/*Rojo*/
            }
        }

Una animacion simple solo algunos cambios de colores
Aplicamos la animacion

.logo span{
            animation-name: rainbow;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }

Esto aplica la animacion a todos las letras dentro del logo
Pero hasta aqui solo hemos animado el texto entero para darle ese toque de arcoiris utilize la propiedad de animation-delay(para retrasar el comienzo de cada letra) y pseudo-elementos(para seleccionar cada letra individualmente):

				.logo span:nth-child(2){
            animation-delay: .5s;
        }
        .logo span:nth-child(3){
            animation-delay: 1s;
        }
        .logo span:nth-child(4){
            animation-delay: 1.5s;
        }
        .logo span:nth-child(5){
            animation-delay: 2s;
        }
        .logo span:nth-child(6){
            animation-delay: 2.5s;
        }
        .logo span:nth-child(7){
            animation-delay: 3s;
        }
        .logo span:nth-child(8){
            animation-delay: 3.5s;
        }
/*Por si no lo sabes el :nth-child( N ) sirve para seleccionar al hijo numero N de un elemento.
.logo span:nth-child(1) significa escoge a un span que sea primer hijo, y que este dentro de .logo
*/

Y asi es como retrasando la animacion de cada letra le damos un toque de arcoiris
Pero aun no te vayas, porque es tedioso tener que seleccionar cada letra para animarla de seguro hay una forma mas optima de hacerlo.
Y weno si la hay

En JavaScript
Tenemos la misma estructura en HTML pero esta vez hacemos un script:

let spans = document.getElementsByTagName('span')
    for(let i = 0; i < spans.length; i++){
        spans[i].animate([
            {
                color: '#F00'
            },{
                color: '#DBFF00'
            },{
                color: '#0F0'
            },{
                color: '#00E0FF'
            },{
                color: '#00F'
            },{
                color: '#F00'
            }
    ],{
        duration: 3000,
        direction:"alternate",
        iterations: Infinity,
        delay: i*100
    })
    }

Algo largo pero facil de entender

let spans = document.getElementsByTagName('span')

Con esto obtenemos todos los spans(letras) en forma de un array
Pero si tienes mas de un span dentro de tu documento html deberias añadirle a cada span una clase y utilizar document.getElementByClassName(‘Clase’)

for(let i = 0; i < spans.length; i++)

Con este for podremos recorrer cada elemento del array spans o sea las letras

spans[i].animate(keyframes, opciones)

Y asi con la funcion Animate podemos animar cada letra individualmente
Animate recibe dos parametros keyframes que es un array de objetos con las propiedades de la animacion, y las opciones que es un objeto con las opciones de la animacion.

Keyframes

[
            {
                color: '#F00'
            },{
                color: '#DBFF00'
            },{
                color: '#0F0'
            },{
                color: '#00E0FF'
            },{
                color: '#00F'
            },{
                color: '#F00'
            }
    ]

Opciones

{
        duration: 3000,
        direction:"alternate",
        iterations: Infinity,
        delay: i*100 /*Aca es donde sucede el arcoiris*/
    }

FIN

Si quieren ver el codigo completo: https://github.com/sebastiandlq/rainbow/tree/css/Rainbow
Cada metodo de CSS y JS estan en diferentes ramas.

Weno, esto tomo mucho mas tiempo de escribir del que esperaba.
Gracias por asistir a mi charla Ted
.