Compatibilidad con Webkit para transiciones de gradiente

Me pregunto si alguien sabe cuándo se admitirá webkit las transiciones de gradientes?
por ejemplo, el siguiente trabajo código no funciona en Chrome 6 (suponiendo grad-transición es un enlace):Compatibilidad con Webkit para transiciones de gradiente

.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)); 
}

Fuente

2010-09-24 GZaidman

que he estado tratando de hacer esto toda la mañana, no puede encontrar una solución sin embargo. –

Boleto de webkit relevante, para referencia futura: https://bugs.webkit.org/show_bug.cgi?id=21725 – Agos

Tratar de hacer la misma cosa.

En este momento 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/

Fuente

2011-01-04 21:05:01 thegaw

Vaya, eso es realmente inteligente. Gracias :) – Nahuel

todavía no funciona a partir de hoy (cromo 21/ff 14) –

Parece que todavía no funciona en Chrome 59/FF 54. IE 11 puede manejarlo fácilmente. – Cheslab

Es posible hacer una transición con gradientes usando un pequeño programa:

El código siguiente establecerá máxima transparencia a 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); 
}

Fuente

2011-09-05 14:56:06

Hice esta pregunta hace un rato, puede ver las respuestas que obtuve buscando a través de 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.

Fuente

2011-10-16 05:30:34

También puede utilizar background-position para dar la ilusión de que el gradiente está cambiando, cuando en realidad simplemente se está moviendo: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Fuente

2011-10-25 07:44:30 Alan

Esto es lo que usa Bootstrap de Twitter cuando pasas los botones: http://twitter.github.com/bootstrap/ – dave1010

estoy trabajando en JS lib que hace una transición de gradientes posibles : Ya se puede usar para gradientes 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); 
    });

github Demo

Fuente

2017-03-31 18:22:47

Compatibilidad con Webkit para transiciones de gradiente

Respuesta

Cuestiones relacionadas