Transitions: Eigenschaft, Dauer, Timing
Fügen Sie transition hinzu, um Änderungen an CSS-Eigenschaften sanft zu animieren, wählen Sie passende Dauern und verwenden Sie Easing-Funktionen wie ease-in-out.
Transitions: Eigenschaft, Dauer, Timing ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist eine CSS-Transition?
Eine CSS-Transition animiert eine Eigenschaft von einem Wert zu einem anderen, wenn sie geändert wird (beim Hover, beim Fokus oder beim Umschalten einer Klasse). Sie ist deklarativ — Sie legen fest, welche Eigenschaften wie lange überblendet werden, und der Browser erledigt den Rest.
Grundlegende Syntax
transition: property duration timing-function delay. Sie können mehrere Transitionen durch Kommas getrennt angeben.
.btn {
background: #6366f1;
transition: background-color 0.2s ease;
}
.btn:hover {
background: #4f46e5;
}
// Browser smoothly animates the colour changeDer Eigenschaftswert
Geben Sie an, welche Eigenschaften überblendet werden sollen. Verwenden Sie all, um jede animierbare Eigenschaft zu überblenden — dadurch können jedoch unerwünschte Transitionen bei nicht zusammenhängenden Eigenschaften ausgelöst werden. Seien Sie aus Gründen der Performance und Vorhersagbarkeit explizit.
.card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
opacity 0.15s linear;
}
/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }Dauer — Wie lange
Geben Sie die Dauer einer Transition in s (Sekunden) oder ms (Millisekunden) an. Kurze Dauern (100–200ms) eignen sich für Mikrointeraktionen. Mittlere Dauern (200–400ms) eignen sich für Zustandsänderungen von Komponenten. Längere Dauern (400ms+) eignen sich für Animationen auf Seitenebene.
Timing-Funktionen — Das Gefühl
Timing-Funktionen steuern die Beschleunigungskurve. Häufige Werte sind: ease (Standard: langsamer Start, schnelles Mittelstück, langsames Ende), linear (konstante Geschwindigkeit), ease-in (beginnt langsam), ease-out (endet langsam) und ease-in-out. Benutzerdefinierte Kurven: cubic-bezier(x1, y1, x2, y2).
.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }Verzögerung — Wann gestartet wird
Eine Verzögerung bei einer Transition startet die Animation nach einer festgelegten Zeit. Verwenden Sie sie, um mehrere Elemente zeitlich versetzt zu animieren oder versehentliche Hover-Auslöser bei schnellen Mausbewegungen zu verhindern.
.dropdown-menu {
opacity: 0;
transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}transitionend-Ereignis
JavaScript kann mit dem transitionend-Ereignis darauf reagieren, dass eine Transition abgeschlossen ist. Das ist nützlich, um Elemente nach einem Ausblenden zu entfernen oder den nächsten Schritt einer Abfolge auszulösen.
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.style.opacity === '0') {
element.remove();
}
});Elemente transformieren
Die Eigenschaft transform wird per GPU beschleunigt und eignet sich ideal für Transitions. Häufige Transformationen sind: translate(), scale(), rotate(), skew(). Wenn Sie transform und opacity animieren, wird nur das Compositing ausgelöst – der schnellste Verarbeitungspfad.
.card {
transform: translateY(0) scale(1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}Was kann per Transition animiert werden?
Jede Eigenschaft mit einem numerischen Wert kann per Transition animiert werden: Deckkraft, Farbe, Transformation, Breite, Höhe, Innenabstand, Rahmen und Schriftgröße. Eigenschaften wie display und visibility lassen sich nicht fließend animieren – verwenden Sie stattdessen opacity zum Ein- und Ausblenden.
Praxis: Modal einblenden
Ein Modal wird eingeblendet und ausgehend von einer leicht kleineren Größe vergrößert. Wenden Sie mit JavaScript die Klasse .open an; CSS übernimmt die Animation.
.modal {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.modal.open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}Performance: Bei Transform und Opacity bleiben
Das Animieren von Eigenschaften, die ein Layout auslösen (width, height, margin, top, left), ist aufwendig – der Browser berechnet das Layout in jedem Frame neu. Bleiben Sie für flüssige Animationen mit 60fps bei transform und opacity.
Kurzer Test
Welche CSS-Eigenschaft sollten Sie für die beste Performance bevorzugt animieren?
Zusammenfassung: CSS-Transitions
transition: property duration timing delay. Animieren Sie bestimmte Eigenschaften, nicht 'all'. ease, ease-out und ease-in-out sorgen für natürliche Bewegungen. Reagieren Sie auf transitionend, um Aktionen zu verketten. Bleiben Sie für eine gute Performance bei transform und opacity. Verwenden Sie Klassenumschaltungen in JS, um Transitions auszulösen.
Häufig gestellte Fragen
Ist die Lektion „Transitions: Eigenschaft, Dauer, Timing“ kostenlos?
Ja — der vollständige Text von „Transitions: Eigenschaft, Dauer, Timing“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Transitions: Eigenschaft, Dauer, Timing“?
Fügen Sie transition hinzu, um Änderungen an CSS-Eigenschaften sanft zu animieren, wählen Sie passende Dauern und verwenden Sie Easing-Funktionen wie ease-in-out. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 2 von 4.
Wie lange dauert die Lektion „Transitions: Eigenschaft, Dauer, Timing“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- CSS Custom Properties: deklarieren und aktualisieren
- Transitions: Eigenschaft, Dauer, Timing
- @keyframes-Animationen
- prefers-reduced-motion berücksichtigen