Como animar backgrounds degradados en CSS

como animar background css

Como animar backgrounds degradados en CSS

En este articulo, aprenderemos como animar backgrounds degradados en CSS. Los degradados son considerados como imágenes de fondo y no podemos configurar una transición para la propiedad background-image.

Lo que por suerte podemos hacer, es animar la posición de los backgrounds (fondos). Lo que nos permitirá hacer cosas divertidas en termino de diseño. Así que vamos a ver como crear un efecto de cambio de colores para botones, como animar el fondo de nuestra página web y como animar texto en CSS con degradado.

 

Implementar degradados en CSS

Para implementar un degradado, tenemos entonces que utilizar la propiedad background-image. Y su valor, puede ser linear-gradient o radial-gradient.

Sus sintaxis son las siguientes:

Utilizaremos el valor de linear-gradient para los ejemplos de este articulo y veremos como podemos animar con CSS esos degradados.

generador degradado css

*El valor de la dirección puede ser to right, to left o en grados.

1-Animar botones en CSS

Para animar el fondo de un botón  y crear un efecto de cambio de colores vamos a poner un background-image a un elemento button html con un linear-gradient con dirección to right y varios valores de colores:

botones con degradados cssAhora podríamos con una pseudo-clase :hover, cambiar el degradado cuando pasamos el ratón encima del botón pero el resultado sería un cambio brusco.

Bacground-image es una de las pocas propiedades a las cuales no se puede aplicar transición.

Tenemos otro recurso que nos va a permitir animar este degradado, es el background-position porque es una propiedad a la cual podemos aplicar una transición.

Así que al ejemplo anterior, le vamos primero a aplicar la propiedad de background-size para agrandar el background y de esa manera “esconder” unos colores.

Como se puede ver si juego con el background position, obtengo efectos distintos:

bacground-position rightbackground-position left

 

Entonces ahora, voy a aplicar ese background-position, a la pseudo-clase hover:

El resultado será un efecto suave de cambio de fondo con degradado.

 

2-Animar backgrounds degradados CSS

Esta vez, vamos a crear una animación para el fondo del elemento body de mi documento html. Como para el boton, pondremos un backgroung-size más grande para poder animar la posición del fondo.

La animación se crea con unos keyframes y como entre los valores es importante poner la propiedad animation-direction con el valor alternate. Es para evitar que la animación vuelva a su punto de partida. El valor alternate, hace que va en un sentido y luego en el otro:

fondo animado css

Es un recurso que no aplicaría a todas las páginas web pero si conseguimos una buena paleta de colores y que el efecto tienen un ritmo correcto puede ser algo muy chulo!

Mi consejo es que la animación no vaya demasiado rápido para no molestar a los ojos del usuario, en el ejemplo el tiempo de la animación es de 20 segundos.

 

3-Animar texto con CSS

Vamos ahora a poner un background a un texto. Es algo que no todo el mundo sabe pero se puede poner un degradado al texto.

Pero si pongo un background-image a un texto pasa lo siguiente:degradado texto

El degradado se aplica a la caja del texto pero no a las letras.

Existe una propiedad de CSS background-clip, que especifica cuánto debe extenderse el fondo dentro de un elemento. Se puede aplicar a border-box, padding-box, content-box y a un texto.  De esa manera, el background esta fijado al texto. Todavia no se puede ver, ya que el texto lo bloquea.

Hay una solución fácil para resolver eso, es aplicar la propiedad color con un valor transparent al texto:

Y como lo hicimos para el fondo del elemento body, le podemos añadir una animación.

degradados texto css

 

Como habéis visto, es muy fácil implementar esos tipos de efectos o de animaciónes en nuestros proyectos web. Además existen herramientas como generadores online de degradados que nos simplifican aún mas la tarea!

Podéis encontrar todo el código de como animar backgrounds degradados en CSS en mi cuenta de codepen: @steph_itw y no dudéis en dejar un comentario si queréis más información sobre el tema.

Escribe un comentario