CSS/Tutorials/Animation/Transition
Text-Info
- 30min
- mittel
- Grundkenntnisse in CSS
Mit transition können Sie Werte von CSS-Eigenschaften allmählich oder schrittweise ändern, indem die dazwischenliegenden Werte interpoliert werden. Eine Transition bezeichnet den Übergang zwischen zwei Zuständen eines HTML-Elements. Transitionen werden dabei durch eine Benutzeraktion ausgelöst.
Inhaltsverzeichnis
Information: Benutzeraktion
Auf Webseiten können Besucher interaktive Elemente wie Links oder Checkboxen mit Maus „hovern“ oder mit der Tastatur fokussieren.
Eine solche Benutzeraktion kann mit dynamischen Pseudoklassen selektiert und entsprechend gestaltet werden.
Allerdings sind nicht alle Eigenschaften animierbar. So können Sie etwa nicht weich zwischen verschiedenen Schriftarten umschalten und auch die Animation von z-index wird Ihnen kein Fading erzeugen.
transition
Die Eigenschaft transition ist eine Zusammenfassung der möglichen Einzelangaben transition-property, transition-duration, transition-timing-function und transition-delay.
Eigentlich ist nur die Angabe der zu animierenden CSS-Eigenschaft, bzw. der Wert all und die Dauer des Übergangs nötig (Der Standardwert für die Dauer ist 0s, sodass es ohne diese Angabe zu einem abrupten Übergang käme).
a {
box-shadow: inset 0 0 #e6f2f7;
}
a:hover,
a:focus {
box-shadow: inset 0 -30px #e6f2f7;
}
#tr1 { transition: all 2s; }
Im Beispiel erhält der Link bei :hover und :focus einen 30px hohen, hellblauen Innenschatten. Da die Animation über 2 Sekunden erfolgt, „fährt“ der Schatten von unten hoch.
Auch bei dem Verlassen des :hover gibt es wieder einen weichen Übergang – im Unterschied zum zweiten Link:
#tr1 { transition: all 2s; }
#tr1:hover,
#tr1:focus { }
#tr2 { }
#tr2:hover,
#tr2:focus { transition: all 2s;}
#tr3 { transition: all 2s; }
#tr3:hover { transition: none;}
Der zweite Link mit der id tr2 erhält die transition nur im :hover-Zustand. Bei :hover erfolgt ein abruptes Einschalten – erst beim Verlassen verschwindet der Hintergrundschatten langsam wieder.
Im dritten (nicht im Live-Beispiel enthaltenen) Fall würde der Übergang von :hover animiert, der Weg zurück durch: transition:none jedoch mit einem harten Übergang realisiert.
Die Deklarationen mit leeren Anweisungsblöcken können natürlich weggelassen werden, sie stehen nur zur Verdeutlichung im Beispiel.
Einzelangaben
Folgende Einzel-Angaben sind bei transition möglich:
none: keine transition, „harter“ Übergangtransition-property: legt fest, welche Eigenschaft(en) verändert werden soll(en)transition-duration: legt die Dauer des Transitions-Übergangs festtransition-timing-function: definiert die Geschwindigkeitskurve des Übergangstransition-delay: Startverzögerung des Übergangsinitial: Werte werden auf Standardwert zurückgesetztinherit: Werte werden vom Elternelement übernommen
transition-property
Die Eigenschaft transition-property legt fest, welche Eigenschaften verändert werden sollen.
Folgende Angaben sind möglich:
none: die Transition wird nicht ausgeführtall: alle Eigenschaften werden verändert (Standardwert)Eigenschaft: durch Komma getrennte Liste von CSS-Eigenschafteninitial: Werte werden auf Standardwert zurückgesetztinherit: Werte werden vom Elternelement übernommen
transition-duration
Die Eigenschaft transition-duration legt die Dauer des Übergangs fest.
Folgende Angaben sind möglich:
Zeit: Zeitangabe in Sekunden(s) oder Millisekunden(ms)
Standardwert ist 0s; also ein abrupter Überganginitial: Werte werden auf Standardwert zurückgesetztinherit: Werte werden vom Elternelement übernommen
transition-timing-function
Die Eigenschaft timing-function definiert die Geschwindigkeitskurve des Transitions-Übergangs.
Folgende Angaben sind möglich:
ease: Übergang mit langsamen Start, beschleunigt und endet langsam (Standardwert) (⇔ cubic-bezier(0.25,0.1,0.25,1))linear: Übergang mit gleicher Geschwindigkeit vom Start bis zum Stop (⇔ cubic-bezier(0,0,1,1))ease-in: Übergang mit einem langsamen Start (⇔ cubic-bezier(0.42,0,1,1))ease-out: Übergang mit einem langsamen Ende (⇔cubic-bezier(0,0,0.58,1))ease-in-out: Übergang mit einem langsamen Start und Ende (⇔ cubic-bezier(0.42,0,0.58,1))cubic-bezier(n,n,n,n): möglich sind numerische Werte zwischen 0 bis 1initial: Werte werden auf Standardwert zurückgesetztinherit: Werte werden vom Elternelement übernommen
.linear .auto {
transition-timing-function: linear;
}
.ease-in .auto {
transition-timing-function: ease-in;
}
.ease-out .auto {
transition-timing-function: ease-out;
}
.ease-in-out .auto {
transition-timing-function: ease-in-out;
}
Im Beispiel sehen Sie, wie die Animation je nach gewählter transition-timing-function unterschiedlich beschleunigt. Allerdings kommen alle gleichzeitig im Ziel an. Die Animation wird mit der Pseudoklasse :target ausgelöst.
Übrigens, es wurden keine externen Bilder eingebunden, die Grafiken wurden alle mit CSS erzeugt. Die Farbwerte wurden mit der CSS-Variable currentColor festgelegt, sodass spätere Änderungen nur im Farbwert des html-Elements getätigt werden müssen.
transition-delay
Die Eigenschaft transition-delay legt fest, mit welcher Verzögerung der Übergang ausgelöst werden soll.
Folgende Angaben sind möglich:
Zeit: Zeitangabe in Sekunden (s) oder Millisekunden (ms)
Standardwert ist 0s; also ein sofortiger Beginninitial: Werte werden auf Standardwert zurückgesetztinherit: Werte werden vom Elternelement übernommen
figure h2 {
transform: translateY(-200px);
transition: all 0.3s ease-in-out;
}
figure:hover h2 {
transform: translateY(0px);
transition-delay: 0.4s;
}
figure p {
transform: translateX(200px) rotate(90deg);
transition: all 0.4s ease-in-out;
}
figure:hover p {
transform: translateX(0px) rotate(0deg);
transition-delay: 0.2s;
}
figure a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
figure:hover a.info {
transform: translateY(0px);
transition-delay: 0.3s;
}
Im Beispiel werden die Bildunterschriften bei :hover mit unterschiedlichen Verzögerungen eingeblendet. Für die Einblendung werden die verschiedenen Funktionen von transform verwendet.
