CSS-Übergänge verwenden
CSS-Übergänge bieten eine Möglichkeit, die Animationsgeschwindigkeit beim Ändern von CSS-Eigenschaften zu steuern. Anstatt dass sich Eigenschaftsänderungen sofort auswirken, können Sie bewirken, dass sich die Änderungen einer Eigenschaft über einen bestimmten Zeitraum erstrecken. Zum Beispiel, wenn Sie die Farbe eines Elements von Weiß zu Schwarz ändern, geschieht die Änderung normalerweise sofort. Mit aktivierten CSS-Übergängen erfolgen die Änderungen in Zeitintervallen, die einer Beschleunigungskurve folgen, die alle angepasst werden können.
Animationen, die den Übergang zwischen zwei Zuständen beinhalten, werden oft als implizite Übergänge bezeichnet, da die Zustände zwischen dem Anfangs- und dem Endzustand implizit vom Browser definiert werden.
CSS-Übergänge ermöglichen es Ihnen, zu entscheiden, welche Eigenschaften animiert werden sollen (indem Sie sie explizit auflisten), wann die Animation beginnt (indem Sie eine Verzögerung einstellen), wie lange der Übergang dauert (indem Sie eine Dauer festlegen) und wie der Übergang ausgeführt wird (indem Sie eine Easing-Funktion definieren, z.B. linear oder schnell am Anfang, langsam am Ende).
Welche CSS-Eigenschaften können übergangen werden?
Der Web-Autor kann definieren, welche Eigenschaft animiert werden soll und auf welche Weise. Dies ermöglicht die Erstellung komplexer Übergänge. Einige Eigenschaften sind jedoch nicht animierbar, da es keinen Sinn ergibt, sie zu animieren.
Hinweis: Der auto
-Wert ist oft ein sehr komplexer Fall. Die Spezifikation empfiehlt, nicht von und zu auto
zu animieren. Einige User Agents, wie die auf Gecko basierenden, implementieren diese Anforderung, und andere, wie die auf WebKit basierenden, sind weniger streng. Das Verwenden 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 Kurzform transition
gesteuert. Dies ist der beste Weg, um Übergänge zu konfigurieren, da es einfacher ist, nicht synchronisierte Parameter zu vermeiden, was sehr frustrierend sein kann, wenn man viel Zeit mit dem Debuggen in CSS verbringt.
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 aufgeführten Eigenschaften werden während der Übergänge animiert; Änderungen an allen anderen Eigenschaften erfolgen wie gewohnt 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, die es jeder Eigenschaft ermöglichen, über einen anderen Zeitraum hinweg zu wechseln.
transition-timing-function
-
Gibt eine Funktion an, um zu definieren, wie Zwischenwerte für Eigenschaften berechnet werden. Easing-Funktionen bestimmen, wie die 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 eines kubischen Bezierverlaufs definiert. Sie können auch Easing aus dem Easing functions Cheat Sheet wählen.
transition-delay
-
Definiert, wie lange gewartet wird, bevor die Änderung einer Eigenschaft tatsächlich beginnt.
Die Kurzform-Syntax für transition
wird wie folgt geschrieben:
div {
transition: <property> <duration> <timing-function> <delay>;
}
Beispiele
Einfaches Beispiel
Dieses Beispiel führt eine viersekündige Schriftgrößen-Übergang mit einer zweisekündigen Verzögerung zwischen dem Zeitpunkt durch, an dem der Benutzer mit der Maus über das Element fährt, und dem Beginn des Animationseffekts:
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
Beispiel für mehrere animierte Eigenschaften
CSS
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000ff;
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 Werteliste einer Eigenschaft kürzer ist als die anderer, 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 wird, wenn die Werteliste einer Eigenschaft länger ist als die für transition-property
, sie abgeschnitten, sodass, wenn Sie das folgende 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;
}
Übergänge verwenden, um Menüs hervorzuheben
Ein häufiger Einsatz von CSS besteht darin, Elemente in einem Menü hervorzuheben, wenn der Benutzer den Mauszeiger über sie bewegt. Es ist einfach, Übergänge zu verwenden, um den Effekt noch ansprechender 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 Gefühl unseres Menüs zu implementieren:
nav {
display: flex;
gap: 0.5rem;
}
a {
flex: 1;
background-color: #333;
color: #fff;
border: 1px solid;
padding: 0.5rem;
text-align: center;
text-decoration: none;
transition: all 0.5s ease-out;
}
a:hover,
a:focus {
background-color: #fff;
color: #333;
}
Dieses CSS stellt das Erscheinungsbild des Menüs her, wobei sich die Hintergrund- und Textfarben ändern, wenn sich das Element im :hover
- und :focus
-Zustand befindet:
Übergang von Anzeige und Inhaltssichtbarkeit
Dieses Beispiel zeigt, wie display
und content-visibility
übergangsweise verwendet werden können. Dieses Verhalten ist nützlich, um Ein- und Ausgangsanimationen zu erstellen, bei denen Sie beispielsweise ein Container aus dem DOM mit display: none
entfernen möchten, aber es mit opacity
ausblenden möchten, anstatt sofort zu verschwinden.
Unterstützende Browser machen display
und content-visibility
mit einer Variation des diskreten Animationstyps übergangsfähig. Dies bedeutet im Allgemeinen, dass Eigenschaften während des Animationsübergangs der beiden Werte 50% dazwischen wechseln.
Es gibt jedoch eine Ausnahme, wenn zu/from display: none
oder content-visibility: hidden
animiert wird. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der übergangene Inhalt für die gesamte Animationsdauer sichtbar ist.
Zum Beispiel:
- Beim Animieren von
display
vonnone
zublock
(oder einem anderen sichtbarendisplay
-Wert) wechselt der Wert zublock
bei0%
der Animationsdauer, sodass er die ganze Zeit sichtbar ist. - Beim Animieren von
display
vonblock
(oder einem anderen sichtbarendisplay
-Wert) zunone
, wechselt der Wert zunone
bei100%
der Animationsdauer, sodass er die ganze Zeit sichtbar ist.
Beim Übergang dieser Eigenschaften muss transition-behavior: allow-discrete
auf den Übergängen eingestellt werden. Dies aktiviert effektiv display
/content-visibility
-Übergänge.
Beim Übergang von display
muss @starting-style
verwendet werden, um einen Satz von Anfangswerten für die auf ein Element angewendeten Eigenschaften bereitzustellen, von dem aus Sie übergehen möchten, wenn das Element seine erste Stilaktualisierung erhält. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements im DOM ausgelöst, was einschließt, wenn display
von none
auf einen anderen Zustand ändert. content-visibility
-Animationen benötigen keine Anfangswerte, die in einem @starting-style
-Block spezifiziert werden. Dies liegt daran, dass content-visibility
ein Element nicht wie display
aus dem DOM verbirgt: es überspringt nur das Rendern des Inhalts des Elements.
HTML
Das HTML enthält zwei <p>
-Elemente mit einem <div>
dazwischen, das wir von display
none
zu block
animieren werden.
<p>
Click anywhere on the screen or press any key to toggle the
<code><div></code> between hidden and showing.
</p>
<div>
This is a <code><div></code> element that transitions between
<code>display: none; opacity: 0</code> and
<code>display: block; opacity: 1</code>. Neat, huh?
</div>
<p>
This is another paragraph to show that <code>display: none;</code> is being
applied and removed on the above <code><div> </code>. If only its
<code>opacity</code> was being changed, it would always take up the space in
the DOM.
</p>
CSS
html {
height: 100vh;
}
div {
font-size: 1.6rem;
padding: 20px;
border: 3px solid red;
border-radius: 20px;
width: 480px;
display: none;
opacity: 0;
transition:
opacity 1s,
display 1s allow-discrete;
/* Equivalent to
transition: all 1s allow-discrete; */
}
.showing {
opacity: 1;
display: block;
}
@starting-style {
.showing {
opacity: 0;
}
}
Beachten Sie den @starting-style
-Block, der verwendet wird, um den Anfangsstil für den Übergang anzugeben, und die Einbeziehung der display
-Eigenschaft in die Übergangsliste, wobei allow-discrete
darauf gesetzt ist.
JavaScript
Schließlich fügen wir ein wenig JavaScript hinzu, um Ereignislistener einzurichten, die den Übergang auslösen (über die Klasse showing
).
const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");
htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);
function showHide() {
divElem.classList.toggle("showing");
}
Ergebnis
Der Code wird wie folgt gerendert:
JavaScript-Beispiele
Hinweis: Vorsicht ist geboten, wenn Sie einen Übergang unmittelbar danach verwenden:
- das Element mit
.appendChild()
zum DOM hinzufügen - die Entfernung der
display: none;
-Eigenschaft eines Elements.
Dies wird behandelt, als hätte der Anfangszustand nie stattgefunden und das Element wäre immer im Endzustand gewesen. Der einfache Weg, dieses Problem zu umgehen, besteht darin, ein setTimeout()
von ein paar Millisekunden anzuwenden, bevor Sie die CSS-Eigenschaft ändern, zu der Sie übergehen möchten.
Übergänge verwenden, um JavaScript-Funktionalität zu glätten
Übergänge sind ein großartiges Werkzeug, um die Dinge viel geschmeidiger aussehen zu lassen, ohne etwas an Ihrer JavaScript-Funktionalität ändern zu müssen. Nehmen Sie das folgende Beispiel.
<p>Click anywhere to move the ball</p>
<div id="foo" class="ball"></div>
Mit JavaScript können Sie den Effekt erreichen, den Ball an eine bestimmte Position zu bewegen:
const f = document.getElementById("foo");
document.addEventListener(
"click",
(ev) => {
f.style.transform = `translateY(${ev.clientY - 25}px)`;
f.style.transform += `translateX(${ev.clientX - 25}px)`;
},
false,
);
Mit CSS können Sie es ohne zusätzlichen Aufwand geschmeidig machen. Fügen Sie dem Element einen Übergang hinzu und jede Änderung wird reibungslos erfolgen:
.ball {
border-radius: 25px;
width: 50px;
height: 50px;
background: #c00;
position: absolute;
top: 0;
left: 0;
transition: transform 1s;
}
Erkennen des Starts und Abschlusses eines Übergangs
Sie können das transitionend
-Ereignis verwenden, um zu erkennen, dass eine Animation beendet ist. Dies ist ein TransitionEvent
-Objekt, das zwei zusätzliche Eigenschaften neben einem typischen Event
-Objekt hat:
propertyName
-
Ein String, der den Namen der CSS-Eigenschaft angibt, deren Übergang abgeschlossen ist.
elapsedTime
-
Eine Fließkommazahl, die angibt, wie viele Sekunden der Übergang zum Zeitpunkt des Auslösens des Ereignisses gelaufen ist. Dieser Wert wird nicht von dem Wert von
transition-delay
beeinflusst.
Wie üblich können Sie die Methode addEventListener()
verwenden, um dieses Ereignis zu überwachen:
el.addEventListener("transitionend", updateTransition, true);
Sie erkennen den Beginn eines Übergangs mit transitionrun
(wird vor jeder Verzögerung ausgelöst) und transitionstart
(wird nach jeder Verzögerung ausgelöst), auf die gleiche Weise:
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
Hinweis: Das transitionend
-Ereignis wird nicht ausgelöst, wenn der Übergang abgebrochen wird, bevor der Übergang abgeschlossen ist, weil entweder das Element display: none
gemacht wird oder sich der Wert der animierten Eigenschaft ändert.
Spezifikationen
Specification |
---|
CSS Transitions |
Siehe auch
- Die
TransitionEvent
-Schnittstelle und dastransitionend
-Ereignis - CSS-Animationen verwenden