You are here
Animación de gradientes CSS3 Sin categoría 

Animación de gradientes CSS3

Animación de gradientes CSS3

La especificación CSS3 Transitions mantiene una lista de propiedades que son animatable . Esta lista, por lo que yo sé, cubre propiedades animatable para ambas transiciones y animaciones de fotogramas clave .

Pero eso es una lista de propiedades .

Y así, ya que los gradientes CSS3 no son realmente propiedades, pero en realidad son imágenes creadas por el navegador, que no están en esa lista de propiedades animatable.

Pero eso no quiere decir que no se puede animar gradientes.

Gradientes, al igual que las imágenes estándar, están sujetos a ciertas propiedades relacionadas con el fondo, que son animatable. Estos incluyen el fondo de tamaño y background-position .

No hay nada demasiado complicado pasando en el código aquí, y desde luego no soy el primero en escribir sobre o demostrar esta técnica.

Pero aquí está el código desde el segundo botón en la página de demostración, sólo para que pueda ver cómo se hace esto:

.two :link , .two :visited  {
   background : #2876b2  ;
   background : -webkit-linear-gradient ( #2876b2 , #549ad0 )  ;
   background : -moz-linear-gradient ( #2876b2 , #549ad0 )  ;
   background : -o-linear-gradient ( #2876b2 , #549ad0 )  ;
   background : linear-gradient ( #2876b2 , #549ad0 )  ;
   background-repeat : repeat ;
   -webkit-background-size : 100% 200%   ;
   -moz-background-size : 100% 200%   ;
   background-size : 100% 200%   ;
   -webkit-transition : all . 5s lineal ;
   -moz-transición : todos. 5s lineal ;
   -o-transición : todos. 5s lineal ;
   transición : . Todo 5s lineal ;
 }

.two : activable , .two : enfoque , .two : activa  {
   background-position : 0 - 102%  ;
 }

He definido explícitamente el fondo en este botón para repetir, pero yo no necesito hacer eso; se repetirá de forma predeterminada.

Esto es sólo para ayudar a ilustrar lo que está pasando aquí. Al pasar por encima, he cambiado la posición de fondo, y cuando se combina esto con el fondo de tamaño valor, se crea un tipo deslizable hacia abajo del efecto.

Por lo que el gradiente, que repite, simplemente se mueve a una posición diferente.

También me he mantenido el mismo estado estacionario, el enfoque y activa, pero se puede animar a los diferentes estados para todos esos pseudo-clases .

Los otros botones de gradiente en la página de demostración son un poco más abstracto en su comportamiento de animación, pero el principio es básicamente el mismo:

Tengo un conjunto, repitiendo gradiente con singulares fondo del tamaño de los valores, y estoy animando el fondo mediante el ajuste de la background-position y / o fondo de tamaño valores.

Las posibilidades con este son infinitas, pero mis pequeños ejemplos tontos deben servir para ilustrar el concepto.

Estoy seguro de que puede venir con algunos efectos agradables con esta técnica, por lo que publicar algunos en los comentarios si lo desea.



Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts