Transición CSS con gradiente de fondo

Question

Estoy aprendiendo sobre animaciones/transiciones con CSS3, pero en este código la transición no funcionó ... ¿por qué?

HTML:

<div id="test"> 
</div> 

CSS:

#test { 
    background-color: #333; 
    background-image: -webkit-linear-gradient(top, #333, #666); 
    width: 100px; 
    height: 100px; 
    -webkit-transition: background 1s linear; 
} 

#test:hover { 
    background-image: -webkit-linear-gradient(top, #666, #999); 
} 

http://jsfiddle.net/LLRfN/

Answer 1

Esto funciona para mí, ya que debería previsto. Un par de cosas, esto sólo funcionará en Google Chrome si quieres que funcione en otros navegadores:

Here is a generator

Here is an explanation

edición

Lo siento, no sabía que había una propiedad transition allí. Después de hacer algunas búsquedas en Google y probar algunas cosas por mi cuenta, está bastante claro que las transiciones en gradientes de fondo aún no son posibles ... todavía.

Aquí es un buen artículo sobre cómo conseguir que funcione con un poco de un truco

http://nimbupani.com/some-css-transition-hacks.html

Answer 2

su funcionamiento muy bien en mí. ¿has envuelto el archivo css con la etiqueta?

<style> 
#test { 
background-color: #333; 
background-image: -webkit-linear-gradient(top, #333, #666); 
width: 100px; 
height: 100px; 
-webkit-transition: background 1s linear; 
} 

#test:hover { 
background-image: -webkit-linear-gradient(top, #666, #999); 
} 
</style> 
<div id="test"> 
</div> 

Answer 3

que trabajó para mí, también me puedo apuntar a la zona de juegos CSS3 donde se puede comprobar sobre la marcha

CSS3 Playground

Answer 4

transición de gradiente puede ser hecho con poco de "trampa". Definitivamente no soy partidario de css (y soy nuevo aquí, así que no me odies rápido: D), sino que simplemente colocas a los divs uno encima del otro, uno con opacidad 1 y el segundo con 0. (Cada div tiene establecer diferentes gradientes) Al desplazarse, cambie la opacidad de 1 a 0 y viceversa.

Establecer la función de temporización y, sin embargo, estos divs se colocan el uno sobre el otro propiedad del índice z hacen el resto. (optimizado para Safari) Tal forma de novato, pero esto funciona (sorprendentemente) perfectamente:

#divgradient1 
    { 
    z-index:-1; 
    height:100px; 
    background: -webkit-linear-gradient(90deg, red, blue); 
    background: -o-linear-gradient(90deg, red, blue); 
    background: -moz-linear-gradient(90deg, red, blue); 
    background: linear-gradient(90deg, red, blue); 

    opacity:1; 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index ; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

#divgradient1:hover{ 
    z-index:-1; 
    opacity:0;   
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2:hover{ 
    opacity:1; 
    z-index:2; 
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2 
    { 
    z-index:1; 
    opacity:0; 
    height:100px;   
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

y lo-que-debe-ver-como divs:

<div id="divgradient1" style="position:absolute;width:100px;"></div> 
    <div id="divgradient2" style="position:absolute;width:100px;"></div>