Verwenden Sie CSS3-Übergänge mit Farbverlaufshintergründen

Farbverläufe nicht unterstützt übergänge noch (obwohl die aktuelle spec sagt, Sie sollte unterstützen, wie Gradienten, wie Steigungs-übergänge via interpolation.).

Wenn Sie möchten, eine fade-in-Effekt mit hintergrund-Farbverlauf, setzten Sie einen Deckkraft auf ein container-element und 'übergang` die Deckkraft.

(Es wurden einige browser-Versionen, unterstützt übergänge an Steigungen (e.g IE10. Getestet habe ich Steigungs-übergänge im vergangenen Jahr, und Sie schien zu arbeiten, aber mein test-code funktioniert nicht mehr - vielleicht gab es eine Störung in der Matrix.)

InformationsquelleAutor der Antwort Michael Mullany

In der folgenden, in ein Anker-tag hat ein Kind und ein Enkelkind. Der Enkel hat den hintergrund Farbverlauf. Das Kind in der Nähe der hintergrund ist transparent, hat aber den Farbverlauf auf den übergang zu. Auf hover des Kindes Deckkraft übergang von 0 zu 1, über einen Zeitraum von 1 Sekunde.

Hier ist der 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;
}

Und, dies ist die HTML:

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

Das oben ist nur getestet in der neuesten version von Chrome. Diese sind vor schweben, auf halbem Weg auf-schweben und vollständig umgestellt auf-hover-Bilder:

InformationsquelleAutor der Antwort PaulQ

Versuchen verwenden :vor und :nach (ie9+)

#wrapper{
    width:400px;
    height:400px;
    margin:0 auto;
    border: 1px #000 solid;
    position:relative;}
#wrapper:after,
#wrapper:before{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:'';
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    opacity:1;
    z-index:-1;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
#wrapper:after{
    opacity:0;
    background: #87e0fd;
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
    background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}
#wrapper:hover:before{opacity:0;}
#wrapper:hover:after{opacity:1;}

InformationsquelleAutor der Antwort Anon

Wie gesagt. Verläufe, die sich aktuell nicht unterstützt CSS Transitions. Aber man konnte es umgehen, in einigen Fällen durch die Einstellung ein aus den Farben transparent, sodass der hintergrund-Farbe, einige andere Verpackung-element schimmert durch, und der übergang statt.

InformationsquelleAutor der Antwort Jens

Kann nicht Schaden, nach einer anderen Ansicht, da es noch keine offizielle Möglichkeit, dies zu tun. Schrieb eine leichte jQuery-plugin, mit dem Sie festlegen können, einen hintergrund mit radialem Farbverlauf und einen übergang Geschwindigkeit. Dies ist die grundlegende Anwendung wird dann lassen Sie es verblassen, optimiert mit requestAnimationFrame (sehr glatt) :

$('#element').gradientFade({

    duration: 2000,
    from: '(20,20,20,1)',
    to: '(120,120,120,0)'
});

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

Hält ursprüngliche hintergrund und alle Eigenschaften erhalten bleiben. Hat auch highlight-tracking als eine Einstellung :

http://codepen.io/Shikkediel/pen/VYRZZY?editors=001

InformationsquelleAutor der Antwort Shikkediel

FWIW, hier Sass-mixin:

Verwendung:

@include gradientAnimation(red, blue, .6s);

Mixin:

@mixin gradientAnimation( $start, $end, $transTime ){
background-size: 100%;
background-image: linear-gradient($start, $end);
position: relative;
z-index: 100;
&:before {
background-image: linear-gradient($end, $start);
content: "";
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
opacity: 0;
width: 100%;
z-index: -100;
transition: opacity $transTime;
}
&:hover {
&:before {
opacity: 1;
}
}
}


Dieser Super Beitrag auf Medium von Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

InformationsquelleAutor der Antwort Ricardo Zea