Vue Academy · Lektion

CSS-Transitions und -Animationen

transition-Eigenschaft in CSS, Keyframe-Animationen, Animate.css mit Vue Transition verwenden.

CSS-Transitions und -Animationen ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei Möglichkeiten für Animationen in CSS

CSS bietet Ihnen zwei Werkzeuge, die perfekt mit Vue-Transitionen zusammenspielen: die Eigenschaft transition (Interpolation zwischen zwei Zuständen) und @keyframes mit animation (mehrstufige Zeitabläufe). Vue kann beide verwenden.

Die transition-Kurzschreibweise

Die Kurzschreibweise transition kombiniert Eigenschaft, Dauer, Timing-Funktion und Verzögerung in einer Zeile. Die Reihenfolge lautet: Eigenschaft, Dauer, Easing, Verzögerung.

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

Mehrere Eigenschaften mit transition animieren

Trennen Sie mehrere Transitionen durch Kommas. Sie können transform und opacity gemeinsam animieren, um einen Slide-and-Fade-Effekt zu erzeugen.

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

Wenn transition nicht ausreicht

transition animiert nur zwischen zwei Zuständen. Für federnde, pulsierende oder mehrstufige Bewegungen benötigen Sie @keyframes, mit denen Sie viele Zwischenstationen definieren können.

Keyframes definieren

@keyframes benennt eine Abfolge von Zuständen mithilfe von Prozentangaben (oder from/to). Jeder Haltepunkt beschreibt die Stile an dieser Stelle des Zeitablaufs.

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Die animation-Eigenschaft

Wenden Sie ein Keyframe-Set mit der Kurzschreibweise animation an: Name, Dauer, Timing-Funktion, Verzögerung, Wiederholungsanzahl, Richtung.

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

Keyframes in Transition einbinden

Platzieren Sie animation in der Klasse enter-active, damit die Animation beim Einfügen abgespielt wird. Beim Verlassen führen Sie dieselben Keyframes rückwärts aus.

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

Animate.css verwenden

Animate.css ist eine Bibliothek mit vorgefertigten Keyframe-Animationen. Anstatt eigene Klassen zu schreiben, weisen Sie Vue über die Custom-Class-Props an, direkt die Klassen von Animate.css zu verwenden.

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

enter-active-class und leave-active-class

<Transition> akzeptiert Props, mit denen die generierten Klassennamen überschrieben werden. Mit enter-active-class und leave-active-class können Sie eine beliebige externe Klasse einbinden – ideal für Animate.css.

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

Die Dauer explizit festlegen

Wenn das CSS-Timing nicht eindeutig ist (Animation plus Transition), legen Sie das duration-Prop fest, damit Vue genau weiß, wann die Klassen entfernt werden sollen. Es akzeptiert eine Zahl oder ein Objekt mit enter/leave.

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

Timing-Funktionen sind wichtig

Die Timing-Funktion bestimmt, wie sich eine Bewegung anfühlt. ease-out wirkt beim Einfügen reaktionsschnell, ease-in beim Verlassen, und cubic-bezier() bietet vollständige Kontrolle.

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Schnelltest

Mit welchem Prop können Sie beim Einfügen eine Animate.css-Klasse anwenden?

Zusammenfassung

Sie haben die Kurzschreibweise transition (Interpolation zwischen zwei Zuständen) mit @keyframes plus animation (mehrstufige Zeitabläufe) verglichen und gelernt, Animate.css über die Props enter-active-class und leave-active-class einzubinden sowie mit duration eine präzise Zeitsteuerung vorzunehmen.

Häufig gestellte Fragen

Ist die Lektion „CSS-Transitions und -Animationen“ kostenlos?

Ja — der vollständige Text von „CSS-Transitions und -Animationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS-Transitions und -Animationen“?

transition-Eigenschaft in CSS, Keyframe-Animationen, Animate.css mit Vue Transition verwenden. Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 „CSS-Transitions und -Animationen“?

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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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

← Zurück zu Vue Academy