supporto Webkit per transizioni e gradienti

Question

Im chiedendo se qualcuno sa quando sarà WebKit transizioni di supporto dei gradienti?
per esempio, il seguente codice di lavoro incaricato di tirare in Chrome 6 (assumendo grad-transizione è un link):

.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

Cercando di fare la stessa cosa.

partire ora non credo sia possibile animare un gradiente.

sto usando una soluzione. Invece di animare il gradiente, sto usando una sfumatura semitrasparente per l'immagine di sfondo e poi l'animazione del colore di sfondo.

#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; 
} 

Ho anche messo alcuni esempi qui: http://tylergaw.com/www/lab/css-gradient-transition-sorta/

Answer 2

E 'possibile fare una transizione su pendenze con un piccolo hack:

Il seguente codice imposterà trasparenza a 0,3 sul colore più scuro . Il passaggio del mouse imposta questo colore su un altro colore. Poiché la trasparenza può essere trasferita, genererà lo stesso effetto.

Ho anche aggiunto la versione non di transizione per 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 3

Ho fatto questa domanda un po 'di tempo fa, è possibile vedere le risposte che ho ottenuto cercando tra le mie domande poste. Mi hanno detto che non puoi ancora farlo correttamente, ma puoi farlo impostando i gradienti su due div diverse, quindi dissolvendo una div sull'altra per creare l'effetto.

Answer 4

È inoltre possibile utilizzare background-position per dare l'illusione che il gradiente sta cambiando, quando in realtà è semplicemente essere spostata: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Answer 5

Sto lavorando su JS lib che rende una transizione per le sfumature possibili : Può già essere utilizzato per i gradienti lineari. 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