Mehrere Eigenschaften animieren
Wenden Sie mit kommagetrennten Werten gleichzeitig Transitions auf mehrere CSS-Eigenschaften an.
Mehrere Eigenschaften animieren ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Warum Transitionen für mehrere Eigenschaften?
Bei Interaktionen in echten Benutzeroberflächen ändern sich oft mehrere Eigenschaften gleichzeitig – etwa Hintergrundfarbe, Schatten und Skalierung beim Hover. CSS unterstützt unabhängige Easing-Funktionen und Dauern für jede Eigenschaft.
Durch Kommas getrennte Transitionen
Listen Sie mehrere Transitionen durch Kommas getrennt auf. Jeder Eintrag gilt unabhängig für eine Eigenschaft:
<div class="card">Card</div>Unterschiedliche Dauer pro Eigenschaft
Geben Sie jeder Eigenschaft eine andere Geschwindigkeit, um ein abgestuftes und natürliches Verhalten zu erzielen:
<button class="btn">Hover-ready button</button>Unterschiedliche Easings pro Eigenschaft
Kombinieren Sie Easing-Funktionen, damit sich jede Eigenschaft passend verhält:
<div class="modal">Modal content</div>Nachteile von transition: all
Bei der Verwendung von transition: all erhält jede sich ändernde Eigenschaft dasselbe Timing. Dadurch können unerwünschte Animationen bei Eigenschaften entstehen, die sofort wechseln sollten (etwa display- oder Positionsänderungen).
Unterbrechbare Transitionen
CSS-Transitionen können unterbrochen werden. Wenn der Hover-Zustand während einer Transition endet, kehrt die Transition sich ausgehend vom aktuellen animierten Wert um, nicht ausgehend vom Endzustand. Dadurch entstehen sanfte Umkehrungen ohne abrupte Sprünge.
Eintritt und Austritt koordinieren
Verwenden Sie unterschiedliche Dauern für Hinein- und Herausbewegen des Mauszeigers, indem Sie die Transitionen im :hover-Zustand überschreiben:
<div class="card demo-active">Card</div>Staffelung mit Verzögerung
Fügen Sie Geschwisterelementen zunehmende Verzögerungen hinzu, um einen gestaffelten Einblendeffekt zu erzeugen:
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>Benutzerdefinierte CSS-Eigenschaften für Staffelungen
Weisen Sie die Verzögerung für die Staffelung über eine benutzerdefinierte CSS-Eigenschaft zu, die per JavaScript oder HTML gesetzt wird:
<div class="item">Item</div>Transition oder Animation
Verwenden Sie Transitionen für Änderungen zwischen zwei Zuständen (inaktiv → Hover). Verwenden Sie @keyframes-Animationen für mehrstufige Abläufe, Schleifeneffekte oder Animationen, die selbstständig starten.
Optimierung mit will-change
Geben Sie dem Browser einen Hinweis darauf, welche Eigenschaften animiert werden, damit er sie vorab optimieren kann. Verwenden Sie dies sparsam – es verbraucht GPU-Speicher.
<div class="card">Card</div>Schnellüberprüfung
Eine Karte hat im Ausgangszustand transition: background 150ms, transform 250ms. Was geschieht beim Hover, wenn die Benutzerin oder der Benutzer den Mauszeiger während der Animation schnell wegbewegt?
Zusammenfassung
Durch Kommas getrennte Transitionen ermöglichen es, für jede Eigenschaft eine eigene Dauer, Easing-Funktion und Verzögerung festzulegen. Vermeiden Sie transition: all — dadurch können unbeabsichtigte Eigenschaften animiert werden. Transitionen können unterbrochen werden und kehren von ihrer aktuellen Position aus gleichmäßig um. Verwenden Sie Verzögerungen für gestaffelte Effekte.
Häufig gestellte Fragen
Ist die Lektion „Mehrere Eigenschaften animieren“ kostenlos?
Ja — der vollständige Text von „Mehrere Eigenschaften animieren“ 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 „Mehrere Eigenschaften animieren“?
Wenden Sie mit kommagetrennten Werten gleichzeitig Transitions auf mehrere CSS-Eigenschaften an. 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 3 von 4.
Wie lange dauert die Lektion „Mehrere Eigenschaften animieren“?
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