web-dev-qa-db-fra.com

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

Je me demande si quelqu'un sait quand Webkit prendra en charge les transitions de gradients?
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));
}
css3webkitcss-transitions
31
GZaidman

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 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'en ai également mis quelques exemples ici: http://tylergaw.com/www/lab/css-gradient-transition-sorta/

50
thegaw

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

10
Alan

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

Le code ci-dessous fixera la transparence à 0,3 sur la couleur la plus sombre. Le survol va définir cette couleur sur une autre couleur. Étant donné que la transparence peut être modifiée, le même effet sera généré.

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);
}
2
Chris Visser

J'ai posé cette question il y a quelque temps, vous pouvez voir les réponses que j'ai obtenues en cherchant dans mes questions posées. Ils m'ont dit que vous ne pouviez pas encore le faire correctement, mais vous pouvez le faire en définissant les gradients sur deux div différents, puis en fondant l'un au-dessus de l'autre pour créer l'effet.

1
android.nick

Je travaille sur JS lib qui permet une transition pour les dégradés: Il peut déjà être utilisé pour les dégradés linéaires. 

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

githubDémo

0
Рыбалов Павел