Verwendung von CSS-Übergängen

CSS-Übergänge bieten eine Möglichkeit, die Animationsgeschwindigkeit beim Ändern von CSS-Eigenschaften zu kontrollieren. Anstatt dass sich Eigenschaftsänderungen sofort auswirken, können Sie die Änderungen einer Eigenschaft über einen Zeitraum stattfinden lassen. Wenn Sie zum Beispiel die Farbe eines Elements von weiß zu schwarz ändern, erfolgt die Änderung normalerweise sofort. Mit aktivierten CSS-Übergängen erfolgen die Änderungen in Zeitintervallen, die einer Beschleunigungskurve folgen, die alle anpassbar sind.

Animationen, die den Übergang zwischen zwei Zuständen umfassen, werden häufig als implizite Übergänge bezeichnet, da die Zustände zwischen den Anfangs- und Endzuständen implizit durch den Browser definiert sind.

Ein CSS-Übergang weist den Browser an, die Zwischenzustände zwischen den Anfangs- und Endzuständen zu zeichnen und zeigt dem Benutzer einen reibungslosen Übergang.

CSS-Übergänge ermöglichen Ihnen, zu entscheiden, welche Eigenschaften animiert werden sollen (indem Sie sie explizit auflisten), wann die Animation startet (durch das Setzen einer Verzögerung), wie lange der Übergang dauern soll (durch das Festlegen einer Dauer) und wie der Übergang abläuft (durch das Definieren einer Easing-Funktion, z.B. linear oder schnell am Anfang, langsam am Ende).

Welche CSS-Eigenschaften können übergeglitten werden?

Der Webentwickler kann definieren, welche Eigenschaft animiert werden muss und in welcher 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 Wert auto ist oft ein sehr komplexer Fall. Die Spezifikation empfiehlt, nicht von und zu auto zu animieren. Einige Benutzeragenten, wie die auf Gecko basierenden, implementieren diese Anforderung, 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.

Definition von Übergängen

CSS-Übergänge werden mit der Kurzformeigenschaft transition gesteuert. Dies ist der beste Weg, um Übergänge zu konfigurieren, da es einfacher ist, asynchrone Parameter zu vermeiden, was sehr frustrierend sein kann, wenn viel Zeit mit dem Debuggen in CSS verbracht werden muss.

Sie können die einzelnen Komponenten des Übergangs mit den folgenden Untereigenschaften steuern:

transition-property: Gibt den 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 erfolgen sollen. Sie können eine einzige Dauer angeben, die für alle Eigenschaften während des Übergangs gilt, oder mehrere Werte, um jeder Eigenschaft zu ermöglichen, über einen anderen Zeitraum zu übergehen.
transition-timing-function: Gibt eine Funktion an, um zu definieren, wie Zwischenwerte für Eigenschaften berechnet werden. Easing-Funktionen bestimmen, wie Zwischenwerte des Übergangs berechnet werden. Die meisten Easing-Funktionen können durch Angabe des Graphen der entsprechenden Funktion spezifiziert werden, wie sie durch vier Punkte definiert ist, die eine kubische Bezier-Kurve definieren. Sie können auch Easing aus dem Easing functions cheat sheet wählen.
transition-delay: Definiert, wie lange gewartet wird, zwischen dem Zeitpunkt, an dem eine Eigenschaft geändert wird und dem eigentlichen Beginn des Übergangs.

Die Kurzformsyntax von transition in CSS 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 über das Element fährt, und dem Beginn des Animationseffekts aus:

css

#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

<body> <p> The box below combines transitions for: width, height, background-color, rotate. Hover over the box to see these properties animated. </p> <div class="box">Sample</div> </body>

CSS

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 Listen von Eigenschaftswerten unterschiedlich lang sind

Wenn die Werteliste einer Eigenschaft kürzer ist als die anderer, werden ihre Werte wiederholt, um sie anzupassen. Zum Beispiel:

css

div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s; }

Dies wird behandelt, als wäre es:

css

div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; }

Wenn umgekehrt die Werteliste einer Eigenschaft länger ist als die von transition-property, wird sie gekürzt, so dass folgende CSS:

css

div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; }

so interpretiert wird:

css

div { transition-property: opacity, left; transition-duration: 3s, 5s; }

Verwendung von Übergängen beim Hervorheben von Menüs

Eine häufige Verwendung von CSS besteht darin, Elemente in einem Menü zu hervorheben, wenn der Benutzer den Mauszeiger über sie bewegt. Es ist einfach, Übergänge zu verwenden, um den Effekt noch attraktiver zu gestalten.

Zuerst richten wir das Menü mit HTML ein:

html

<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 Verhalten unseres Menüs umzusetzen:

css

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 bestimmt das Aussehen des Menüs, wobei sich Hintergrund- und Textfarben ändern, wenn sich das Element in seinen :hover- und :focus-Zuständen befindet:

Übergang von `display` und `content-visibility`

Dieses Beispiel demonstriert, wie display und content-visibility übergeglitten werden können. Dieses Verhalten ist nützlich, um Ein-/Austrittsanimationen zu erstellen, bei denen Sie beispielsweise einen Container aus dem DOM mit display: none entfernen möchten, aber ihn mit opacity ausblenden möchten, anstatt sofort zu verschwinden.

Unterstützende Browser übergleiten display und content-visibility mit einer Variation der diskreten Animationstypen. Dies bedeutet im Allgemeinen, dass Eigenschaften zwischen zwei Werten wechseln, bei 50 % des Animationszeitraums zwischen den beiden.

Es gibt jedoch eine Ausnahme, wenn zu/von display: none oder content-visibility: hidden animiert wird. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der übergangene Inhalt während der gesamten Animationsdauer angezeigt wird.

Ein Beispiel:

Beim Animieren von display von none zu block (oder einem anderen sichtbaren display-Wert) wird der Wert zu block bei 0% der Animationsdauer umgeschaltet, damit er die ganze Zeit sichtbar ist.
Beim Animieren von display von block (oder einem anderen sichtbaren display-Wert) zu none wird der Wert zu none bei 100% der Animationsdauer umgeschaltet, damit er die ganze Zeit sichtbar ist.

Beim Übergehen dieser Eigenschaften muss transition-behavior: allow-discrete für die Übergänge festgelegt werden. Dies aktiviert effektiv display/content-visibility-Übergänge.

Beim Übergehen von display wird @starting-style benötigt, um einen Satz von Startwerten für Eigenschaften bereitzustellen, die auf ein Element gesetzt sind, von dem 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 den ersten Stilaktualisierungen eines Elements ausgelöst, wenn sie erstmals im DOM erscheinen, was auch die Änderung von display von none zu einem anderen Zustand umfasst. content-visibility-Animationen benötigen keine Startwerte, die in einem @starting-style-Block spezifiziert sind. Das liegt daran, dass content-visibility ein Element nicht wie display aus dem DOM entfernt: Es wird lediglich das Rendern des Inhalts des Elements übersprungen.

HTML

Das HTML enthält zwei <p>-Elemente mit einem <div> dazwischen, das wir von display none auf block animieren werden.

html

<p> Click anywhere on the screen or press any key to toggle the <code>&lt;div&gt;</code> between hidden and showing. </p> <div> This is a <code>&lt;div&gt;</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>&lt;div&gt; </code>. If only its <code>opacity</code> was being changed, it would always take up the space in the DOM. </p>

CSS

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 Startstil für den Übergang anzugeben, und die Einbeziehung der display-Eigenschaft in der Übergangsliste mit allow-discrete darauf gesetzt.

JavaScript

Schließlich fügen wir etwas JavaScript hinzu, um Ereignislistener einzurichten, die den Übergang (über die showing-Klasse) auslösen.

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: Es sollte Vorsicht geboten sein, wenn ein Übergang unmittelbar nach:

dem Hinzufügen des Elements zum DOM mit .appendChild()
dem Entfernen einer display: none;-Eigenschaft eines Elements.

behandelt wird, als wäre der Anfangszustand niemals aufgetreten und das Element wäre immer im Endzustand gewesen. Der einfache Weg, diese Einschränkung zu überwinden, besteht darin, setTimeout() um einige Millisekunden zu verzögern, bevor Sie die CSS-Eigenschaft ändern, zu der Sie übergehen möchten.

Übergänge verwenden, um JavaScript-Funktionalität angenehm zu gestalten

Übergänge sind ein großartiges Werkzeug, um Dinge ohne großen Aufwand für Ihre JavaScript-Funktionalität viel angenehmer erscheinen zu lassen. Schauen Sie sich das folgende Beispiel an.

html

<p>Click anywhere to move the ball</p> <div id="foo" class="ball"></div>

// Make the ball move to a certain position: 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)`; });

Mit CSS können Sie die über JavaScript angewendeten Stile glätten. Fügen Sie dem Element einen Übergang hinzu, und jede Änderung erfolgt sanft:

body { background-color: white; color: #333333; font: 1.2em / 1.5 "Helvetica Neue", "Helvetica", "Arial", sans-serif; padding: 0; margin: 0; } p { margin-top: 3em; } main { box-sizing: border-box; display: flex; justify-content: center; align-items: center; max-width: 660px; height: 400px; border: 1px solid #cccccc; padding: 20px; }

css

.ball { border-radius: 25px; width: 50px; height: 50px; background: #cc0000; position: absolute; top: 0; left: 0; transition: transform 1s; }

Beginn und Abschluss eines Übergangs erkennen

Sie können das transitionend-Ereignis verwenden, um festzustellen, dass eine Animation fertig ist. Dies ist ein TransitionEvent-Objekt, das zwei zusätzliche Eigenschaften hat, die über ein typisches Event-Objekt hinausgehen:

propertyName: Ein String, der den Namen der CSS-Eigenschaft angibt, deren Übergang abgeschlossen ist.
elapsedTime: Eine Gleitkommazahl, die die Anzahl der Sekunden angibt, die der Übergang zum Zeitpunkt des Ereignisauslösens lief. Dieser Wert wird nicht von der transition-delay-Eigenschaft beeinflusst.

Wie üblich können Sie die addEventListener()-Methode verwenden, um dieses Ereignis zu überwachen:

el.addEventListener("transitionend", updateTransition);

Sie erkennen den Beginn eines Übergangs mit transitionrun (wird vor einer Verzögerung ausgelöst) und transitionstart (wird nach einer Verzögerung ausgelöst) in ähnlicher Weise:

el.addEventListener("transitionrun", signalStart); el.addEventListener("transitionstart", signalStart);

Hinweis: Das transitionend-Ereignis wird nicht ausgelöst, wenn der Übergang abgebrochen wird, bevor der Übergang abgeschlossen ist, entweder weil das Element auf display: none gesetzt wird oder der animierte Eigenschaftenwert geändert wird.

Spezifikationen

Specification
CSS Transitions

Siehe auch

Die TransitionEvent-Schnittstelle und das transitionend-Ereignis
Verwendung von CSS-Animationen

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden