Verwendung von CSS-Übergängen
CSS-Übergänge bieten eine Möglichkeit, die Animationsgeschwindigkeit bei Änderungen von CSS-Eigenschaften zu kontrollieren. Anstatt, dass Eigenschaftsänderungen sofort wirksam werden, können Sie bewirken, dass Änderungen einer Eigenschaft über einen bestimmten Zeitraum hinweg stattfinden. Zum Beispiel: Wenn Sie die Farbe eines Elements von Weiß auf Schwarz ändern, erfolgt die Änderung normalerweise sofort. Mit aktivierten CSS-Übergängen treten die Änderungen in Zeitintervallen auf, die einer Beschleunigungskurve folgen, die alle anpassbar sind.
Animationen, die einen Übergang zwischen zwei Zuständen beinhalten, werden oft als implizite Übergänge bezeichnet, da die Zwischenzustände zwischen dem Anfangs- und Endzustand implizit vom Browser definiert sind.
CSS-Übergänge ermöglichen es Ihnen zu entscheiden, welche Eigenschaften animiert werden sollen (indem Sie sie explizit auflisten), wann die Animation beginnen soll (durch Festlegen einer Verzögerung), wie lange der Übergang dauern wird (durch Festlegen einer Dauer) und wie der Übergang ablaufen wird (durch Definieren einer Easing-Funktion, z. B. linear oder schnell am Anfang, langsam am Ende).
Welche CSS-Eigenschaften können übertragen werden?
Der Webautor kann definieren, welche Eigenschaft animiert werden soll und in welcher Weise. Dies ermöglicht die Erstellung komplexer Übergänge. Einige Eigenschaften sind jedoch nicht animierbar, da es keinen Sinn macht, sie zu animieren.
Hinweis:
Der Wert auto ist oft ein sehr komplexer Fall. Die Spezifikation empfiehlt, nicht von und zu auto zu animieren. Einige User Agents, wie die auf Gecko basierenden, setzen diese Anforderung um, während andere, wie die auf WebKit basierenden, weniger streng sind. Die Verwendung von Animationen mit auto kann zu unvorhersehbaren Ergebnissen führen, abhängig vom Browser und seiner Version, und sollte vermieden werden.
Übergänge definieren
CSS-Übergänge werden mit der Kurzschrift-Eigenschaft transition gesteuert. Dies ist der beste Weg, um Übergänge zu konfigurieren, da es einfacher macht, nicht synchronisierte Parameter zu vermeiden, was sehr frustrierend sein kann, wenn man viel Zeit damit verbringen muss, in CSS zu debuggen.
Sie können die einzelnen Komponenten des Übergangs mit den folgenden Untereigenschaften steuern:
transition-property-
Gibt den Namen oder die Namen der CSS-Eigenschaften an, auf die Übergänge angewendet werden sollen. Nur die hier aufgelisteten Eigenschaften werden während Übergängen animiert; Änderungen an allen anderen Eigenschaften erfolgen wie gewöhnlich sofort.
transition-duration-
Gibt die Dauer an, über die Übergänge stattfinden sollen. Sie können eine einzelne Dauer angeben, die für alle Eigenschaften während des Übergangs gilt, oder mehrere Werte, um jeder Eigenschaft zu erlauben, über einen anderen Zeitraum zu wechseln.
transition-timing-function-
Gibt eine Funktion an, um festzulegen, wie Zwischenwerte für Eigenschaften berechnet werden. Easing-Funktionen bestimmen, wie Zwischenwerte des Übergangs berechnet werden. Die meisten Easing-Funktionen können angegeben werden, indem das Diagramm der entsprechenden Funktion bereitgestellt wird, wie durch vier Punkte definiert, die eine kubische Bézierkurve definieren. Sie können auch Easing aus dem Easing-Funktionen-Spickzettel auswählen.
transition-delay-
Definiert, wie lange gewartet werden soll, bis ein Übergang tatsächlich beginnt, nachdem eine Eigenschaft geändert wurde.
Die Kurzschrift-CSS-Syntax transition wird wie folgt geschrieben:
transition: <property> <duration> <timing-function> <delay>;
Beispiele
Einfaches Beispiel
Dieses Beispiel führt einen viersekündigen Schriftgrößenübergang mit einer zweisekündigen Verzögerung zwischen dem Zeitpunkt, an dem der Benutzer mit der Maus über das Element fährt, und dem Beginn des Animationseffekts aus:
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
Beispiel mit mehreren animierten Eigenschaften
CSS
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: blue;
transition:
width 2s,
height 2s,
background-color 2s,
rotate 2s;
}
.box:hover {
background-color: #ffcccc;
width: 200px;
height: 200px;
rotate: 180deg;
}
Wenn Eigenschaftswertlisten unterschiedliche Längen haben
Wenn die Wertliste einer Eigenschaft kürzer ist als die der anderen, werden ihre Werte wiederholt, um sie anzupassen. Zum Beispiel:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
Dies wird behandelt, als wäre es:
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
Ähnlich, wenn eine Werteliste einer Eigenschaft länger ist als die der transition-property, wird sie abgeschnitten, sodass Sie folgenden CSS haben:
div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}
Dies wird interpretiert als:
div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}
Verwenden von Übergängen beim Hervorheben von Menüs
Eine häufige Verwendung von CSS besteht darin, Elemente in einem Menü hervorzuheben, wenn der Benutzer den Mauszeiger darüber bewegt. Es ist einfach, Übergänge zu verwenden, um den Effekt noch attraktiver zu gestalten.
Zuerst richten wir das Menü mit HTML ein:
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact Us</a>
<a href="#">Links</a>
</nav>
Dann erstellen wir das CSS, um das Aussehen und das Gefühl unseres Menüs zu implementieren:
nav {
display: flex;
gap: 0.5rem;
}
a {
flex: 1;
background-color: #333333;
color: white;
border: 1px solid;
padding: 0.5rem;
text-align: center;
text-decoration: none;
transition: all 0.5s ease-out;
}
a:hover,
a:focus {
background-color: white;
color: #333333;
}
Dieses CSS etabliert das Aussehen des Menüs, wobei sowohl die Hintergrund- als auch die Textfarben geändert werden, wenn sich das Element im :hover- und :focus-Zustand befindet:
Übergang von display und content-visibility
Dieses Beispiel zeigt, wie display und content-visibility übergangen werden können. Dieses Verhalten ist nützlich, um Ein-/Ausblendeanimationen zu erstellen, bei denen Sie beispielsweise einen Container aus dem DOM entfernen möchten mit display: none, ihn aber mit