Erstelle CSS3-Animationen mit Keyframes

Einführung

In diesem Lab werden die Studierenden in die Welt der CSS3-Animationen eintauchen, indem sie die leistungsstarke @keyframes-Regel und Animationstechniken beherrschen. Der Kurs bietet eine umfassende Untersuchung der Erstellung dynamischer Web-Animationen, wobei der Schwerpunkt auf dem Verständnis der Keyframe-Syntax, der Definition von Animations-Eigenschaften und der Implementierung fortgeschrittener Animations-Effekte liegt, ohne auf JavaScript zurückzugreifen.

Die Teilnehmer lernen, glatte, komplexe Animationen zu kreieren, indem sie die Animationsstadien mithilfe von prozentualen Keyframes und Transform-Eigenschaften definieren. Anhand von praktischen Beispielen und Übungen werden die Studierenden entdecken, wie sie Elemente dynamisch bewegen, skalieren und färben können, und erwerben die Fähigkeiten, um ansprechende und interaktive Web-Erlebnisse mit reinen CSS3-Animationstechniken zu schaffen.

Verstehen der CSS3-Animation Keyframe-Syntax

In diesem Schritt lernst du die grundlegende Syntax der CSS3-Animation Keyframes, die die Bausteine für die Erstellung dynamischer Web-Animationen sind. CSS-Animationen ermöglichen es dir, Elemente glatt von einem Stil in einen anderen zu transformieren, ohne JavaScript zu verwenden.

Lassen Sie uns beginnen, die grundlegende Syntax von CSS-Keyframes zu verstehen. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens styles.css.

CSS-Keyframe-Animationen werden mithilfe der @keyframes-Regel definiert, die das Verhalten der Animation in verschiedenen Stadien der Animationssequenz angibt. Hier ist ein einfaches Beispiel, um die Syntax zu demonstrieren:

@keyframes moveRight {
  /* Startzustand (0% oder "from") */
  from {
    transform: translateX(0);
  }

  /* Endzustand (100% oder "to") */
  to {
    transform: translateX(300px);
  }
}

In diesem Beispiel ist moveRight der Animationsname, und er definiert, wie sich ein Element von seiner ursprünglichen Position 300 Pixel nach rechts bewegt.

Du kannst auch prozentuale Keyframes für komplexere Animationen verwenden:

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

Diese Animation zeigt, wie du mehrere Stadien einer Animation mithilfe von Prozentwerten angeben kannst, was für komplexere und dynamischere Effekte möglich macht.

Wichtige Punkte, die du bei der Keyframe-Syntax im Kopf behalten solltest:

Verwende @keyframes gefolgt von einem eindeutigen Animationsnamen
Definiere Zustände mit from/to oder Prozentwerten
Gib die CSS-Eigenschaften an, die in jedem Stadium animiert werden sollen

Beispielausgabe einer einfachen Animation:

[Ein Div-Element bewegt sich glatt von links nach rechts]
[Ein Div-Element ändert seine Farbe von rot über grün nach blau]

Definieren einer einfachen Animation mit der @keyframes-Regel

In diesem Schritt lernst du, wie du eine einfache Animation mit der @keyframes-Regel erstellst, indem du eine Animation eines sich bewegenden Elements erstellst. Wir werden auf die Kenntnisse aus dem vorherigen Schritt aufbauen und ein praktikableres Beispiel erstellen.

Zunächst erstellen wir eine HTML-Datei, um unsere Animation zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic CSS Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="animated-box"></div>
  </body>
</html>

Nun aktualisieren wir die zuvor erstellte styles.css-Datei mit einer detaillierteren Animation:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

@keyframes moveAndResize {
  0% {
    /* Startzustand */
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    /* Mittelpunkt der Animation */
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    /* Endzustand */
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Zergliedern wir die @keyframes-Regel:

Wir definieren eine Animation namens moveAndResize
Zu 0% (Start) befindet sich die Box an ihrer ursprünglichen Position
Zu 50% (Mittelpunkt) bewegt sich die Box 200px nach rechts und vergrößert sich
Zu 100% (Ende) bewegt sich die Box 400px nach rechts und kehrt zur ursprünglichen Größe zurück

Beispielausgabe:

[Eine blaue Box, die:
 - Von links nach rechts bewegt wird
 - Die Größe von normal auf größer und zurück ändert
 - Die Farbe von blau über grün nach rot ändert]

Dieses Beispiel zeigt, wie man:

Eine Mehrstufenanimation erstellt
Prozentbasierte Keyframes verwendet
Mehrere Transformationen (Translation und Skalierung) kombiniert
Die Farbe während der Animation ändert

Applikation von Animations-Eigenschaften auf HTML-Elemente

In diesem Schritt lernst du, wie du Animations-Eigenschaften auf HTML-Elemente anwenden kannst, um deine Keyframe-Animationen zum Leben zu erwecken. Wir werden die zuvor erstellte styles.css-Datei ändern, um spezifische Animations-Eigenschaften hinzuzufügen, die kontrollieren, wie die Animation verhält.

Aktualisiere die styles.css-Datei mit folgendem CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Animations-Eigenschaften */
  animation-name: moveAndResize; /* Name der Keyframe-Animation */
  animation-duration: 3s; /* Gesamtzeit eines Animationszyklus */
  animation-timing-function: ease-in-out; /* Glatte Beschleunigung und Verzögerung */
  animation-delay: 1s; /* Warte 1 Sekunde, bevor die Animation startet */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Erläuterung der wichtigsten Animations-Eigenschaften:

animation-name: Verknüpft das Element mit einer bestimmten @keyframes-Regel
animation-duration: Legt die Gesamtzeit für einen vollständigen Animationszyklus fest
animation-timing-function: Kontrolliert die Geschwindigkeitskurve der Animation
animation-delay: Gibt eine Wartezeit vor dem Start der Animation an

Du kannst auch die Kurzschreibweise animation-Eigenschaft verwenden, um diese zu kombinieren:

.animated-box {
  animation: moveAndResize 3s ease-in-out 1s;
}

Beispielausgabe:

[Eine blaue Box, die:
 - 1 Sekunde wartet, bevor sie startet
 - Glatt von links nach rechts bewegt wird
 - Größe und Farbe allmählich ändert
 - 3 Sekunden benötigt, um einen Animationszyklus abzuschließen]

Anpassen der Animationszeit und Wiederholung

In diesem Schritt lernst du, wie du deine CSS-Animationen durch die Steuerung ihrer Zeit, Wiederholung und Richtung feinjustierst. Wir erweitern das vorherige Beispiel, um die fortgeschrittene Anpassung von Animationen zu demonstrieren.

Aktualisiere die styles.css-Datei mit folgendem CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Anpassen von Animations-Eigenschaften */
  animation-name: moveAndResize;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.3, 1);
  animation-iteration-count: 3; /* Wiederhole die Animation 3 Mal */
  animation-direction: alternate; /* Kehre die Richtung bei jeder Wiederholung um */
  animation-fill-mode: forwards; /* Halte den Endzustand nach der Animation */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  100% {
    transform: translateX(400px) scale(1.5);
    background-color: red;
  }
}

Wichtige Eigenschaften zur Anpassung von Animationen:

animation-timing-function: Kontrolliert die Geschwindigkeitskurve (z.B. cubic-bezier() für benutzerdefinierte Beschleunigung)
animation-iteration-count: Definiert, wie oft die Animation wiederholt wird
animation-direction: Bestimmt die Wiedergabereihenfolge der Animation
animation-fill-mode: Gibt an, wie die Stile vor/nach der Animation angewendet werden

Du kannst auch die Kurzschreibweise animation-Eigenschaft verwenden:

.animated-box {
  animation: moveAndResize 3s cubic-bezier(0.5, 0.1, 0.3, 1) 3 alternate
    forwards;
}

Beispielausgabe:

[Eine blaue Box, die:
 - 3 Mal bewegt und skaliert wird
 - Die Richtung bei jeder Wiederholung ändert
 - Eine benutzerdefinierte Geschwindigkeitskurve verwendet
 - Nach der Animation an der Endposition verbleibt]

Experimentieren mit fortgeschrittenen Animations-Effekten

In diesem Schritt erkundest du fortgeschrittene CSS-Animationstechniken, indem du eine Animation mit mehreren Elementen erstellst, die die Macht von CSS-Keyframes und -Transformationsweisen demonstriert.

Aktualisiere die index.html-Datei, um mehrere animierte Elemente hinzuzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced CSS Animations</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
    </div>
  </body>
</html>

Ersetze den Inhalt von styles.css durch die folgende fortgeschrittene Animation:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity: 0.7;
}

.circle1 {
  background-color: #ff6b6b;
  animation: orbit1 4s infinite linear;
}

.circle2 {
  background-color: #4ecdc4;
  animation: orbit2 4s infinite linear;
}

.circle3 {
  background-color: #45b7d1;
  animation: orbit3 4s infinite linear;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(120deg) translateX(200px) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(200px) rotate(-480deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(240deg) translateX(250px) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(250px) rotate(-600deg);
  }
}

Demonstrierte wichtige fortgeschrittene Animationstechniken:

Mehrere simultane Animationen
Komplexe Rotationen und Translations
Unendliche Animation mit linearer Zeitsteuerung
Gestaffelte Bahnenbewegung
Opazitäts- und Farbvariationen

Beispielausgabe:

[Drei farbige Kreise kreisen um einen zentralen Punkt
 - Die Kreise bewegen sich auf unterschiedlichen Entfernungen
 - Stetige, glatte Rotation
 - Überlappender, durchsichtigkeitswirksamer Effekt]

Zusammenfassung

In diesem Lab haben die Teilnehmer die Grundlagen der CSS3-Animation mit Keyframes untersucht und gelernt, wie dynamische Web-Animationen ohne Verwendung von JavaScript erstellt werden können. Das Lab konzentrierte sich auf das Verständnis der Syntax der @keyframes-Regel, mit der Entwickler komplexe Animationssequenzen mithilfe von prozentualen oder von/to-Zuständen definieren können. Die Teilnehmer lernten, die Animationsverhalten durch die Transformation von CSS-Eigenschaften wie Position, Farbe und Größe in unterschiedlichen Stadien einer Animationssequenz anzugeben.

Die praktischen Übungen führten die Lernenden durch die Erstellung von einfachen und fortgeschrittenen Animations-Effekten, darunter das Bewegen von Elementen über den Bildschirm, das Ändern von Farben und die Anpassung der Animationszeit und Wiederholungen. Indem die Teilnehmer mit unterschiedlichen Keyframe-Konfigurationen experimentierten, erhielten sie praktische Erfahrungen bei der Gestaltung von glatten, ansprechenden Web-Animationen, die die Interaktivität der Benutzeroberfläche und das visuelle Ansprechen verbessern.