The CSS Podcast – 044: Transitions
Bei der Interaktion mit einer Website stellen Sie möglicherweise fest, dass viele Elemente einen state haben. Drop-down-Menüs können beispielsweise geöffnet oder geschlossen sein. Die Farbe von Schaltflächen kann sich ändern, wenn sie fokussiert sind oder wenn der Mauszeiger darauf bewegt wird. Modale Elemente können ein- und ausgeblendet werden.
Standardmäßig wechselt CSS den Stil dieser Status sofort.
Mithilfe von CSS-Übergängen können wir zwischen dem Ausgangs- und dem Zielstatus des Elements interpolieren. Der Übergang zwischen den beiden verbessert die User Experience, indem eine visuelle Anleitung, Unterstützung und Hinweise zu Ursache und Wirkung der Interaktion bereitgestellt werden.
Übergangseigenschaften
In CSS können Sie Übergänge mit den verschiedenen Übergangseigenschaften oder der Kurzeigenschaft transition verwenden.
Übergangseigenschaft
Mit der Eigenschaft transition-property wird angegeben, welcher Stil bzw. welche Stile übergangen werden sollen.
.my-element {
transition-property: background-color;
}
transition-property akzeptiert einen oder mehrere CSS-Eigenschaftsnamen in einer durch Kommas getrennten Liste.
Optional können Sie mit transition-property: all angeben, dass jedes Attribut umgestellt werden soll.
Übergangsdauer
Mit der Eigenschaft transition-duration wird die Dauer der Umstellung definiert.
transition-duration akzeptiert Zeiteinheiten in Sekunden (s) oder Millisekunden (ms) und ist standardmäßig 0s.
Timing-Funktion-für-Übergang
Mit der Property transition-timing-function können Sie die Geschwindigkeit eines CSS-Übergangs im Verlauf von transition-duration variieren.
Standardmäßig überträgt CSS Ihre Elemente mit einer konstanten Geschwindigkeit (transition-timing-function: linear). Lineare Übergänge können jedoch am Ende etwas künstlich wirken: In Wirklichkeit haben Objekte Gewicht und können nicht sofort stoppen und starten. Wenn du einen Übergang ein- oder ausschaltest, werden die Übergänge lebendiger und natürlicher.
Unser Modul zur CSS-Animation bietet einen guten Überblick über Timing-Funktionen.
Mit den DevTools können Sie in Echtzeit mit verschiedenen Zeitfunktionen experimentieren.
Übergangsverzögerung
Mit der Eigenschaft transition-delay können Sie angeben, wann der Übergang beginnen soll. Wenn transition-duration nicht angegeben ist, werden die Übergänge sofort gestartet, da der Standardwert 0s ist. Für diese Eigenschaft ist eine Zeiteinheit zulässig, z. B. Sekunden (s) oder Millisekunden (ms).
Diese Eigenschaft eignet sich für Stufenübergänge, die erzielt werden, indem für jedes nachfolgende Element in einer Gruppe ein längerer transition-delay-Wert festgelegt wird.
transition-delay ist auch für die Fehlerbehebung nützlich. Wenn Sie die Verzögerung auf einen negativen Wert setzen, kann ein Übergang weiter in die Zeitachse eingeleitet werden.
Kurzschrift: Übergang
Wie bei den meisten CSS-Eigenschaften gibt es auch eine Kurzversion. transition kombiniert transition-property, transition-duration, transition-timing-function und transition-delay.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
Was kann und was nicht umgestellt werden?
Beim Schreiben von CSS können Sie angeben, welche Eigenschaften animierte Übergänge haben sollen. Weitere Informationen finden Sie in der MDN-Liste der animierbaren CSS-Eigenschaften.
Im Allgemeinen ist es nur möglich, Elemente zu übertragen, die sich zwischen ihrem Start- und Endzustand in einem "mittleren Zustand" befinden können. Es ist beispielsweise nicht möglich, Übergänge für font-family hinzuzufügen, da nicht klar ist, wie der mittlere Status zwischen serif und monospace aussehen sollte. Andererseits ist es möglich, Übergänge für font-size hinzuzufügen, da die Einheit eine Länge ist, zwischen der interpoliert werden kann.
Hier sind einige häufige Eigenschaften, die Sie umstellen können.
Transformieren
Die CSS-Eigenschaft transform wird in der Regel umgestellt, da sie eine GPU-beschleunigte Eigenschaft ist, die zu einer flüssigeren Animation führt und außerdem weniger Akku verbraucht. Mit dieser Eigenschaft können Sie ein Element beliebig skalieren, drehen, verschieben oder neigen.
Weitere Informationen finden Sie im Abschnitt zu Transformationen in unserem Modul „Funktionen“.
Farbe
Vor, während und nach einer Interaktion kann Farbe ein guter Indikator für den Zustand sein. Beispielsweise kann sich die Farbe einer Schaltfläche ändern, wenn der Mauszeiger auf sie bewegt wird. Durch diese Farbänderung kann der Nutzer wissen, dass die Schaltfläche anklickbar ist.
Die Eigenschaften color, background-color und border-color sind nur einige Stellen, an denen die Farbe bei einer Interaktion übertragen werden kann.
Weitere Informationen findest du in unserem Modul zu Farben.
Schatten
Schatten werden häufig übergangen, um Höhenunterschiede anzuzeigen, z. B. durch den Fokus der Nutzenden.
Weitere Informationen findest du in unserem Modul zu Schatten.
Filter
filter ist eine leistungsstarke CSS-Eigenschaft, mit der Sie Grafikeffekte spontan hinzufügen können. Der Wechsel zwischen verschiedenen filter-Zuständen kann ziemlich beeindruckende Ergebnisse liefern.
Weitere Informationen finden Sie in unserem Modul zu Filtern.
Umstellungstrigger
Ihr CSS-Code muss eine Statusänderung und ein Ereignis enthalten, durch das diese Statusänderung ausgelöst wird, damit CSS-Übergänge aktiviert werden. Ein typisches Beispiel für einen solchen Trigger ist die Pseudoklasse :hover. Diese Pseudoklasse stimmt überein, wenn der Nutzer den Mauszeiger auf ein Element bewegt.
Nachfolgend finden Sie eine Liste mit einigen Pseudoklassen und Ereignissen, die Statusänderungen in Ihren Elementen auslösen können.
:hover: stimmt überein, wenn sich der Cursor über dem Element befindet.:focus: stimmt überein, ob das Element im Fokus ist.:focus-within: Eine Übereinstimmung, wenn das Element oder eines seiner Nachfolger fokussiert ist.:target: Eine Übereinstimmung, wenn das Fragment der aktuellen URL mit der ID des Elements übereinstimmt.:active: stimmt überein, wenn das Element aktiviert wird (in der Regel, wenn die Maus darauf gedrückt wird).- Änderung von
classvon JavaScript: Wenn sich die CSS-classeines Elements über JavaScript ändert, werden zulässige Eigenschaften, die geändert wurden, von CSS übertragen.
Unterschiedliche Übergänge für Betreten und Verlassen
Wenn Sie verschiedene transition-Eigenschaften für den Fokus oder den Mauszeiger darauf festlegen, können Sie interessante Effekte erzielen.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
Überlegungen zur Barrierefreiheit
CSS-Übergänge sind nicht für jeden geeignet. Bei manchen Menschen können Übergänge und Animationen zu Bewegungskrankheit oder Unwohlsein führen. Glücklicherweise verfügt CSS über eine Medienfunktion namens prefers-reduced-motion, die erkennt, wenn ein Nutzer angegeben hat, dass weniger Bewegungen auf seinem Gerät verwendet werden sollen.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
Weitere Informationen zu dieser Medienfunktion findest du in unserem Blogpost prefers-Reduced-motion: Manchmal ist weniger Bewegung mehr.
Hinweise zur Leistung
Bei der Arbeit mit CSS-Übergängen können Leistungsprobleme auftreten, wenn Sie Übergänge für bestimmte CSS-Eigenschaften hinzufügen. Wenn sich beispielsweise Eigenschaften wie width oder height ändern, verschieben sie Inhalte auf dem Rest der Seite. Dadurch wird CSS gezwungen, neue Positionen für jedes betroffene Element für jeden Frame des Übergangs zu berechnen. Wenn möglich, empfehlen wir stattdessen die Verwendung von Properties wie transform und opacity.
In unserem Leitfaden zu leistungsstarken CSS-Animationen erhalten Sie ausführliche Informationen zu diesem Thema.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Umstellungen
Mit welcher Übergangseigenschaft können Sie ein Easing festlegen?
transition-durationtransition-easingtransition-cubic-beziertransition-timing-functionanimation-easeEs empfiehlt sich, transition-property: all zu verwenden.
all kann zu Leistungsproblemen und unbeabsichtigten Umstellungen führen.Alle Properties können umgestellt werden.
font-family können nicht umgestellt werden.