Prise en charge de Webkit pour les transitions de dégradé

Question

Je me demande si quelqu'un sait quand le kit Web prendra-t-il en charge les transitions de dégradés?
par exemple, le code suivant ne fonctionne pas dans Chrome 6 (en supposant que grad-transition est un lien):

 .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

Essayer de faire la même chose.

Pour l'instant je ne pense pas qu'il soit possible d'animer un dégradé.

J'utilise une solution de contournement. Au lieu d'animer le dégradé, j'utilise un dégradé semi-transparent pour l'image d'arrière-plan, puis j'anime la couleur d'arrière-plan.

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

J'ai également mis en place quelques exemples ici: http://tylergaw.com/www/lab/css-gradient-transition-sorta/

Answer 2

Vous pouvez également utiliser background-position pour donner l'illusion que le dégradé change, alors qu'en réalité il est simplement déplacé: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Answer 3

Il est possible de faire une transition sur des dégradés en utilisant un petit hack:

Le code ci-dessous définira la transparence à 0,3 sur la couleur la plus foncée. Le survol définira cette couleur sur une autre couleur. Comme la transparence peut être transférée, elle produira le même effet.

J'ai également ajouté la version non transitoire pour mozilla et 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 4

J'ai posé cette question il y a un moment, vous pouvez voir les réponses que j'ai obtenues en parcourant mes questions posées. Ils m'ont dit que vous ne pouvez pas encore le faire correctement, mais vous pouvez le faire en réglant les dégradés sur deux divs différents, puis en atténuant un div par-dessus l'autre pour créer l'effet.