css3 - grey - Soporte de Webkit para transiciones de gradiente

text gradient css

Question

Me pregunto si alguien sabe cuándo webkit apoyará las transiciones de degradados.
por ejemplo, el siguiente código no funciona en Chrome 6 (suponiendo que grad-transition sea un enlace):

.grad-transition {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
     -webkit-transition: background-image .5s;
}
.grad-transition:hover {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
}

Answer 1

Es posible hacer una transición en gradientes usando un pequeño truco:

El siguiente código establecerá la transparencia en 0.3 en el color más oscuro. El vuelo estacionario establecerá este color a otro color. Dado que la transparencia se puede hacer una transición, generará el mismo efecto.

También agregué la versión no transitoria para mozilla e IE.

.menu li a {
  background-color: #ffffff; 
  background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3)));

  background: linear-gradient(left,#eeeeee, #ffffff);
  background: -moz-linear-gradient(180deg,  #eeeeee,  #ffffff);
}

.menu li a:hover {
  background-color: #006613;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;

  background: linear-gradient(left, #006613, #eeeeee);
  background: -moz-linear-gradient(180deg,  #006613,  #eeeeee);
}

Answer 2

Estoy trabajando en JS lib, lo que hace posible una transición para degradados: ya se puede usar para degradados lineales. Uso:

    var button = $(''#button'');
    var targetGradientString = ''linear-gradient(rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)'';
    var targetElement = $(''#target'');

    button.click( function() {
        targetElement.gradientTransition(targetGradientString, 1500, 60);
    });

Demo github

Answer 3

Hice esta pregunta hace un rato, puedes ver las respuestas que obtuve al buscar mis preguntas. Me dijeron que aún no puedes hacer esto correctamente, pero puedes hacerlo estableciendo los degradados en dos divs diferentes, luego desvaneciendo un div encima del otro para crear el efecto.

Answer 4

Intentando hacer lo mismo.

A partir de ahora no creo que sea posible animar un degradado.

Estoy usando una solución alternativa. En lugar de animar el degradado, estoy usando un degradado semitransparente para la imagen de fondo y luego animando el color de fondo.

#button
{
    background-color: #dbdbdb;
    background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%, rgba(255, 255, 255, 0.9)),
    color-stop(100%, rgba(0, 0, 0, 0.6))
    );
}

#button:hover
{
   background-color: #353535;
}

También puse algunos ejemplos aquí: http://tylergaw.com/www/lab/css-gradient-transition-sorta/

Answer 5

También puede usar la posición de fondo para crear la ilusión de que el degradado está cambiando, cuando en realidad solo se está moviendo: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/