transizione css sul gradiente dell'immagine di sfondo

Question

Ho un'immagine di sfondo nel mio css3 con immagine e gradiente definiti. Voglio anche avere una transizione quando la lezione cambia da on_time -> too_late o viceversa.

Non riesco a ottenere la transizione sul gradiente. Questo è in qualche modo supportato in css3?

Grazie

div.too_late 
{ 
    color: White;   
    background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);  

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;  
} 

div.on_time 
{ 
    color: #222;   
    background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);  

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;   
} 

Answer 1

Non è possibile avere transizioni su sfondo pendenze. Ma si può dare un'occhiata a questo link per farlo funzionare con "hack": http://nimbupani.com/some-css-transition-hacks.html

Si può anche fare apparire come se fosse la modifica utilizzando il turno di background-position: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Ecco una domanda simile con più link e informazioni btw: Use CSS3 transitions with gradient backgrounds

Answer 2

"sfumature non supportano ancora le transizioni (anche se le specifiche dice che dovrebbero) Se si desidera un effetto fade-in con uno sfondo sfumato, si necessario impostare. opacità sul contenitore e transizione degli opaci ty ".

Fonte: Use CSS3 transitions with gradient backgrounds

Answer 3

La proprietà background-image non è supportata

http://www.w3.org/TR/css3-transitions/#animatable-css