Dauer und Timing von Transition-Eigenschaften
Legen Sie fest, welche Eigenschaften animiert werden, wie lange dies dauert und wann die Transition mit delay beginnt.
Dauer und Timing von Transition-Eigenschaften ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist eine CSS-Transition?
Eine CSS-Transition interpoliert über eine festgelegte Dauer zwischen zwei Eigenschaftswerten, sobald sich der Wert ändert (z. B. beim Hover). Dafür ist kein JavaScript erforderlich.
transition-property
Legt fest, welche CSS-Eigenschaften animiert werden. Verwenden Sie all, um jede animierbare Eigenschaft zu übertragen, oder listen Sie bestimmte Eigenschaften auf.
<button>Save changes</button>transition-duration
Legt fest, wie lange die Transition dauert. Akzeptiert Zeitwerte in Sekunden (s) oder Millisekunden (ms).
<div class="card">Card</div>Die transition-Kurzschreibweise
Kombiniert alle vier transition-Unterwerte: property | duration | timing-function | delay.
<button class="btn">Submit</button>Mehrere Transitionen
Listen Sie mehrere Transitionen durch Kommas getrennt auf, um verschiedene Eigenschaften unabhängig voneinander zu animieren:
<div class="card">Card</div>transition-delay
Verzögert den Beginn der Transition. Das ist nützlich, um Animationen zu staffeln oder eine Transition abschließen zu lassen, bevor eine andere beginnt.
<nav>
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Contact</a>
</nav>Transition im Ausgangszustand
Platzieren Sie die Eigenschaft transition immer im Ausgangszustand, nicht im :hover-Zustand. So wird sichergestellt, dass die Transition sowohl beim Hinein- als auch beim Herausbewegen des Mauszeigers ausgeführt wird.
<button class="btn demo-active">Hover me</button>Was kann übertragen werden?
Die meisten numerischen CSS-Eigenschaften können übertragen werden: Farben, Abmessungen, Deckkraft, Transformationen usw. Diskrete Eigenschaften (wie display) können nicht fließend interpoliert werden – sie wechseln sofort.
Warnung zu transition: all
Die Verwendung von transition: all kann unerwartete Animationen bei Eigenschaften verursachen, die Sie nicht animieren möchten. Geben Sie im Produktionscode immer konkrete Eigenschaften an.
Farben übertragen
Bei Farb-Transitionen wird zwischen den Werten interpoliert. Verwenden Sie für beste Ergebnisse dasselbe Farbformat:
<button class="btn demo-active">Hover me</button>Transition und Layout-Thrashing
Vermeiden Sie aus Performancegründen Transitionen für Layout auslösende Eigenschaften wie width, height, margin und padding. Sie bewirken bei jedem Animationsframe eine Neuberechnung des Layouts. Verwenden Sie stattdessen transform und opacity.
Schnellüberprüfung
Wo sollte die Eigenschaft transition platziert werden, damit sie sowohl beim Hinein- als auch beim Herausbewegen des Mauszeigers ausgeführt wird?
Zusammenfassung
CSS-Transitionen glätten Eigenschaftsänderungen über einen Zeitraum mithilfe von transition-property, duration, timing-function und delay. Platzieren Sie Transitionen im Ausgangszustand, damit die Animation in beide Richtungen funktioniert. Bevorzugen Sie aus Gründen der Performance und Vorhersagbarkeit konkrete Eigenschaftslisten gegenüber all.
Lerne CSS mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „Dauer und Timing von Transition-Eigenschaften“ kostenlos?
Ja — der vollständige Text von „Dauer und Timing von Transition-Eigenschaften“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dauer und Timing von Transition-Eigenschaften“?
Legen Sie fest, welche Eigenschaften animiert werden, wie lange dies dauert und wann die Transition mit delay beginnt. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Dauer und Timing von Transition-Eigenschaften“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Dauer und Timing von Transition-Eigenschaften
- Easing-Funktionen: ease, linear, cubic-bezier
- Mehrere Eigenschaften animieren
- Performance: Transformierbare vs. neu zu rendernde Eigenschaften