👨‍💻 Cómo animar gradientes o degradados con css

Te mostraré con un ejemplo sencillo cómo puedes animar gradientes o degradados solo con CSS. Un efecto que luce muy bien para dar notoriedad a cualquier sitio web y que casualmente amamos usar en pixonauta.com.

Primero debemos asignar una clase al contenedor o elemento que vayamos a aplicar el fondo degradado, en nuestro caso le llamaremos .gradient-bg-animation

<div class="gradient-bg-animation"></div>

Luego escribimos el código CSS de nuestra clase

.gradient-bg-animation{
    height:200px; /*La altura dependerá de lo que requieras*/
    background: rgb(189, 189, 189); /*Usamos un background por defecto*/
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,143,38,1) 0%, rgba(150,126,197,1) 48%, rgba(0,255,222,1) 100%);
    background-size: 300% 100%; /*Asignamos un ancho para el background del 300% y altura 100%*/
    animation: gradient 15s ease infinite; /*'gradient' es el nombre de la animación que crearemos, tarda en completarse 15s y vuelve a empezar infinitamente*/
}

Para el degradado estoy usando este:

linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,143,38,1) 0%, rgba(150,126,197,1) 48%, rgba(0,255,222,1) 100%);

Pero puedes construir tu gradiente personalizado, te recomiendo usar algún software o herramienta como Figma o cssgradient.io para ayudarte a generarlo de forma precisa y sin complicaciones.

Luego vamos a necesitar construir nuestra animación en CSS. Para ello usaremos la regla @keyframes donde especificamos la posición de nuestro background en cada fragmento de la animación durante los 15 segundos que especificamos en la clase .gradient-bg-animation.

Yo la dividí en 3 keyframes (0%, 50% y 100%), pero podrías decidir agregar mas keyframes:

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

Te dejo el ejemplo del siguiente Codepen para que le eches un ojo al funcionamiento

See the Pen Gradient animation CSS by Angel Mavare (@angelmavare) on CodePen.

 
 Fuente original del artículo: 
   https://pixonauta.com/