CSS Como realizar un animado efecto de texto degradado - Gradient

Las animaciones CSS son impresionantes. No solo hacen grandes piezas de arte, sino que también nos dan la posibilidad de agregar elementos de diseño fluido, directamente en nuestras páginas web. Recientemente, estoy realizando proyectos donde integro animaciones de gradiente CSS para darles una sensación viva.

? Entonces que esperamos manos en acción. ¡Todo lo que realmente necesitamos es CSS!

— Así que lo primero en mi CSS son las reglas de animación.

a {
    animation: fluido 30s ease-in-out infinite;
}

Aquí, estoy diciendo — reproducir la animación llamada fluido por una duración de 30 segundos. Configure la animación  ease-in-out para lograr un efecto más suave, y tenga el bucle de animación para un número infinito de veces.

— Luego están las reglas de fondo.

a {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 300%;
}

Configuro mi fondo para que sea un degradado lineal linear-gradient y le doy los colores deseados. Para gradientes elegantes utilizo a menudo UI Gradients cuando no se me ocurre nada. Luego estiro el fondo hasta el 300% del tamaño usando la propiedad background-size para darle espacio a la animación y que se mueva.

— Luego configuro background-clip como texto y el text-fill-color (color de relleno de texto) como transparente para que mi color de fuente predeterminado no interfiera con mi degradado.

a {
    -webkit-background-clip: text;
        background-clip: text;
    -webkit-text-fill-color: transparent;
}

— Ahora en la animación real. Creo una animación de fotogramas @keyframe clave denominada fluido y configuro fotogramas en las marcas de 0%, 50% y 100%.

@keyframes fluido {
    0% { background-position: 0 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0 50% }
}

Y ahí lo tienes: un agradable y fluido degradado animado sobre el texto. Otro pequeño y divertido elemento de diseño cortesía de CSS.

?  Resultado final: ?

a {
  animation: fluido 30s ease-in-out infinite;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 300%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fluido {
    0% { background-position: 0 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0 50% }
}