Utiliser des transitions CSS3 avec des arrière-plans dégradés

Question

J'essaie de faire passer le curseur de la souris sur une vignette pour que le dégradé d'arrière-plan apparaisse en fondu. La transition ne fonctionne pas, mais si je la change simplement en une valeur rgba (), elle fonctionne correctement. Les gradients ne sont-ils pas pris en charge? J'ai aussi essayé d'utiliser une image, elle ne fera pas la transition non plus.

Je sais que c'est possible, comme dans un autre message, quelqu'un l'a fait, mais je ne peux pas comprendre comment exactement. Toute aide> Voici quelques CSS pour travailler avec:

 #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

Les dégradés ne prennent pas encore en charge les transitions (bien que la spécification l’autorise).

Si vous voulez un effet fade-in avec un dégradé de fond ,

vous devez définir une opacité sur le container and transition l'opacité.

(et j'aimerais voir l'autre message où vous dites que cela a été fait.)

Mise à jour : IE10+ now supports gradient transitions

Answer 2

Une façon de contourner ce qui est de la transition, le fond pour donner l'effet que le gradient est en train de changer: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

CSS3 gradient de transition avec background-position

Bien que vous ne pouvez pas directement animer les dégradés à l'aide de la CSS transition de la propriété, il est possible d'animer la propriété background-position pour réaliser un simple dégradé de l'animation:

Le code est très simple:

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

---

HTML:

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

Answer 3

Une solution est d'utiliser background-position pour imiter le gradient de transition. Cette solution a été utilisée dans Twitter Bootstrap il y a quelques mois.

Mise à jour

http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614

Voici un exemple rapide:

L'état des liens

 .btn {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 40px;
  background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
  background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
  background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 90px;
  background-position: 0 -30px;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

État de pointage

.btn:hover {
   background-position: 0 0;
}

Answer 4

Dans la suite, une balise d'ancrage a un enfant et un petit-enfant. Le petit-fils a l'extrême dégradé d'arrière-plan. L'enfant dans le proche arrière-plan est transparent, mais a le gradient de transition. Sur le vol stationnaire, l'enfant, l'opacité est la transition de 0 à 1, sur une période de 1 seconde.

Voici le CSS:

.bkgrndfar {
  position:absolute;
  top:0;
  left:0;
  z-index:-2;
  height:100%;
  width:100%;
  background:linear-gradient(#eee, #aaa);
}

.bkgrndnear {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:radial-gradient(at 50% 50%, blue 1%, aqua 100%);
  opacity:0;
  transition: opacity 1s;
}

a.menulnk {
  position:relative;
  text-decoration:none;
  color:#333;
  padding: 0 20px;
  text-align:center;
  line-height:27px;
  float:left;
}

a.menulnk:hover {
  color:#eee;
  text-decoration:underline;
}

/* This transitions child opacity on parent hover */
a.menulnk:hover .bkgrndnear {
  opacity:1;
}

Et, c'est le HTML:

<a href="#" class="menulnk">Transgradient
<div class="bkgrndfar">
  <div class="bkgrndnear">
  </div>
</div>
</a>

Le ci-dessus est testé uniquement dans la dernière version de Chrome. Ce sont les avant de planer, à mi-chemin sur pointage et entièrement transférée sur pointage des images:

Answer 5

Vous pouvez FAUX transitions entre les dégradés, à l'aide de transitions dans l'opacité de quelques empilées les dégradés, comme décrit dans quelques réponses ici:

CSS3 animation avec des dégradés.

Vous pouvez également la transition de la position de la place, comme décrit ici:

CSS3 gradient de transition avec background-position.

Certains de plus en plus techniques ici:

L'animation de Dégradés CSS3.