Ein Gartartikel von Christian Olear:
Animationen ohne Javascript, nur durch die Veränderung von CSS-Eigenschaften: mit CSS3-Transitions kein Problem. Während der Arbeit an einem aktuellen Projekt musste ich leider feststellen, dass sich CSS-Transitions nicht auf Background-Gradients anwenden lassen. Hier ein kleines Workaround um trotzdem das gewünschte Ergebnis erzielen zu können.
Animation von Hintergrundfarben – Demo
Wir haben also ein </div>-Element mit einem Background-Gradient und möchten diesen verändern, wenn sich der Mauszeiger auf dem Element befindet. Zur Generierung des Verlaufes empfehle ich Ultimate CSS Gradient Generator, dort kann man sich schnell und einfach das CSS für den gewünschten Gradient generieren lassen.
Hätten wir statt einem Gradient nur eine einfache Hintergrundfarbe, würde das ganze so aussehen:
[css]<style><!–
.background {
background-color:#0C87C9;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
.background:hover {
background-color:#9BC100;
}
–></style>
<div class="background">Text</div>[/css]
Animation von Background-Gradients – Demo
Meine erste Idee wäre gewesen, eine zweite Ebene über die Hintergrund Ebene mit einem leicht transparenten Gradient zu legen. Doch will man, dass das Element nicht nur einen Verlauf der Helligkeit hat, sondern auch den Farbton ändert, wird das zu kompliziert.
Nimmt man allerdings zwei Ebenen mit den unterschiedlichen Gradients, kann man eine Transition auf die opacity der Elemente anwenden und so einen Übergang zwischen den Gradients schaffen.
[css]<style><!–
.background {
position:absolute;
top:20px;
left:20px;
width:500px;
height:300px;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
.blue {
/*
* Eigenschaften für Gradient 1
*/
z-index:2;
}
.blue:hover {
opacity:0;
}
.green {
/*
* Eigenschaften für Gradient 2
*/
z-index:1;
}
–></style>
<div class="background green">Text</div>
<div class="background blue">Text</div>
[/css]
Durch die Positionsangaben in der Klasse .background befinden sich beide Elemente an der gleichen Position. Da .blue im Markup nach .green folgt, befindet er sich im Vodergrund. Man kann das ansonsten auch mit der CSS Eigenschaft z-index steuern.
In .blue:hover haben wir einen opacity Wert von 0, was den blauen </div> verschwinden lässt, wenn man mit dem Mauszeiger hovert. Entscheidend allerdings: Er tut es langsam, da in .background die Transition auf den opacity Wert definiert wurde.
Es handelt sich, wie gesagt, um einen Workaround für dieses Problem. Ein anderer Ansatz wäre beide Verläufe in ein Element zu fügen, via Background-Size nur einen bestimmten Ausschnitt anzuzeigen und via Animation der Background-Position den Effekt zu erzielen.