Améliorez les arrière-plans dégradés avec les transitions CSS3

Question

J'essaie d'utiliser CSS pour effectuer une transition sur une vignette afin que l'arrière-plan s'efface au survol. La conversion ne fonctionne pas, mais si je la change simplement en valeur rgba(), cela fonctionne à merveille. Ne prend-il pas en charge les dégradés ? J'ai également essayé d'utiliser une image et cela ne convertit pas non plus l'image.

Je sais que c'est possible car quelqu'un l'a fait dans un autre post, mais je ne sais pas exactement comment. Toute aide> Voici quelques CSS qui peuvent être utilisés :

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

Answer 1

Une solution consiste à transformer la position de l'arrière-plan pour créer un effet de changement de dégradé : http://sapphion.com/2011/10/css3-Gradient transition et position d'arrière-plan/

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  

<div id="DemoGradient"></div>  

Answer 2

Les dégradés ne prennent pas encore en charge les transitions (bien que la spécification actuelle indique qu'ils devraient prendre en charge les transitions de type dégradé à dégradé via interpolation.).

Si vous souhaitez un effet de fondu avec un dégradé d'arrière-plan, vous devez définir la opacité sur l'élément conteneur et "transitionner" l'opacité.

(Il existe déjà certaines versions de navigateur qui prennent en charge les transitions dégradées (par exemple IE10. J'ai testé les transitions dégradées dans IE en 2016 et elles semblaient fonctionner à l'époque, mais mon code de test ne fonctionne plus.)

Mise à jour : octobre 2018 Il est désormais confirmé que les transitions dégradées avec une nouvelle syntaxe sans préfixe [par exemple Radial-gradient(...)] fonctionnent (à nouveau ?) sur Microsoft Edge 17.17134. Je ne sais pas quand cela a été ajouté. Ne fonctionne toujours pas sur les derniers Firefox et Chrome/Windows 10.

Mise à jour : décembre 2021 La solution de contournement @property fonctionne désormais dans les navigateurs récents basés sur Chromium (mais ne fonctionne pas dans Firefox). Voir (et voter) la réponse de @mahozad ci-dessous (ou YMMV ci-dessus).