Zoom in Zoom Out Animation: Meisterschaft in den CSS-Grundlagen

Einführung

In diesem Lab werden wir CSS-Animationen erkunden, indem wir einen einfachen, aber effektiven Zoom-Effekt (Hinein- und Herauszoomen) erstellen. CSS-Animationen ermöglichen es uns, dynamische visuelle Effekte auf Webseiten hinzuzufügen, ohne JavaScript zu verwenden. Am Ende dieses Labs werden Sie verstehen, wie Sie CSS-Keyframes und Animations-Eigenschaften verwenden können, um reibungslose Übergänge zu erstellen, die die Benutzererfahrung auf Ihren Websites verbessern können.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/fonts -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/box_model -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/width_and_height -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/backgrounds -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/animations -.-> lab-35259{{"Zoom in Zoom Out Animation"}} css/transformations -.-> lab-35259{{"Zoom in Zoom Out Animation"}} end

Verständnis der HTML-Struktur

Bevor wir mit der Erstellung unserer Animation beginnen, müssen wir die HTML-Struktur verstehen, mit der wir arbeiten werden. In diesem Schritt werden wir die bereitgestellte HTML-Datei untersuchen und alle erforderlichen Änderungen vornehmen.

Öffnen Sie die Datei index.html im Editor.
Wenn die Datei leer ist oder fehlt, erstellen Sie sie mit folgendem Inhalt:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

Lassen Sie uns verstehen, was diese HTML-Datei macht:
- Wir haben eine Standard-HTML-Dokumentstruktur mit einem Titel und Viewport-Einstellungen.
- Wir verlinken auf eine externe CSS-Datei namens style.css.
- Wir fügen eine Überschrift und einen Absatz hinzu, um unsere Demo zu erklären.
- Am wichtigsten ist, dass wir ein <div>-Element mit der Klasse zoom-in-out-box haben, das animiert werden wird.
Speichern Sie die Datei index.html, wenn Sie Änderungen vorgenommen haben.

Dieses div-Element wird unser "Leinwand" für die Erstellung der Animation sein. Im nächsten Schritt werden wir dieses Element mit CSS gestalten.

Grundlegende CSS-Stilgestaltung

Nachdem wir nun unsere HTML-Struktur festgelegt haben, erstellen wir die grundlegende CSS-Stilgestaltung für unser Animations-Element.

Öffnen Sie die Datei style.css im Editor.
Wenn die Datei leer ist oder fehlt, erstellen Sie sie mit folgendem Inhalt:

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

Lassen Sie uns verstehen, was diese CSS-Regeln tun:
- Wir setzen einige grundlegende Stile für die Seite (Schriftart, Breite und Abstände).
- Wir gestalten die Überschrift mit einer dunklen Graufarbe.
- Für unser Animations-Element .zoom-in-out-box tun wir Folgendes:
  - Fügen wir einen Abstand von 24px um das Element herum hinzu.
  - Setzen wir seine Breite und Höhe auf 50px.
  - Geben wir ihm eine lebhafte rosa Hintergrundfarbe.
Speichern Sie die Datei style.css nach diesen Änderungen.
Um Ihren Fortschritt zu sehen, klicken Sie auf die Schaltfläche "Go Live" in der unteren rechten Ecke von VSCode. Dadurch wird ein Webserver auf Port 8080 gestartet. Aktualisieren Sie dann die Registerkarte Web 8080, um Ihre gestaltete Box zu sehen.

Sie sollten jetzt ein kleines rosa Quadrat auf Ihrer Webseite sehen. Dieses Quadrat ist das Element, das wir in den nächsten Schritten animieren werden.

Erstellen der Keyframes-Animation

CSS-Animationen funktionieren, indem Keyframes definiert werden, die die Stile angeben, die ein Element zu verschiedenen Zeitpunkten während der Animationssequenz haben soll. Lassen Sie uns die Keyframes für unsere Zoom-In-Zoom-Out-Animation erstellen.

Öffnen Sie erneut die Datei style.css und fügen Sie am Ende folgenden Code hinzu:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

Lassen Sie uns verstehen, was dieser Code tut:
- @keyframes ist eine CSS-At-Regel, die die Stadien und Stile einer Animation definiert.
- zoom-in-zoom-out ist der Name, den wir unserer Animation geben (wir werden diesen Namen später referenzieren).
- Innerhalb der Keyframes definieren wir, was zu verschiedenen Zeitpunkten der Animation passiert:
  - Bei 0% (zum Start) hat das Element seine normale Größe mit scale(1, 1).
  - Bei 50% (zur Hälfte der Animation) wächst das Element auf das 1,5-fache seiner Größe mit scale(1.5, 1.5).
  - Bei 100% (zum Ende) kehrt das Element zu seiner normalen Größe zurück.
- Die transform-Eigenschaft mit der scale()-Funktion ändert die Größe des Elements.
Speichern Sie die Datei style.css nach dem Hinzufügen dieser Keyframes.

Die Keyframes definieren, was unsere Animation tun wird, aber wir haben sie noch nicht auf unser Element angewendet. Im nächsten Schritt werden wir die Animation mit unserer Box verbinden.

Anwenden der Animation

Nachdem wir nun unsere Keyframes definiert haben, müssen wir die Animation auf unser Box-Element anwenden.

Öffnen Sie erneut die Datei style.css und ändern Sie den Selektor .zoom-in-out-box wie folgt:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

Lassen Sie uns die hinzugefügte animation-Eigenschaft verstehen:
- animation ist eine Kurzschreibweise, mit der mehrere Animations-Eigenschaften auf einmal festgelegt werden können.
- zoom-in-zoom-out ist der Name unserer Keyframes-Animation.
- 1s gibt an, dass ein Zyklus der Animation 1 Sekunde dauert.
- ease ist die Timing-Funktion, die bewirkt, dass die Animation langsam startet, beschleunigt und dann wieder verlangsamt.
- infinite bedeutet, dass die Animation unendlich wiederholt wird.
Speichern Sie die Datei style.css nach diesen Änderungen.
Wenn der Webserver bereits läuft, aktualisieren Sie einfach die Registerkarte Web 8080. Wenn nicht, klicken Sie in der unteren rechten Ecke auf "Go Live", um den Server zu starten, und öffnen Sie dann die Registerkarte Web 8080.

Sie sollten jetzt sehen, wie Ihr rosa Quadrat in einer kontinuierlichen Animation sanft ein- und auszoomt. Das Quadrat wird größer, bis es das 1,5-fache seiner ursprünglichen Größe erreicht, und schrumpft dann wieder auf die normale Größe zurück. Dieser Zyklus wiederholt sich unendlich.

Experimentieren mit Animations-Eigenschaften

Lassen Sie uns unsere Animation anpassen, indem wir mit verschiedenen Animations-Eigenschaften experimentieren. Dies wird Ihnen helfen, zu verstehen, wie diese Eigenschaften das Animationsverhalten beeinflussen.

Öffnen Sie die Datei style.css und ändern Sie den Selektor .zoom-in-out-box, um verschiedene Animations-Eigenschaften auszuprobieren:

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Add a slight rotation during the animation */
  border-radius: 10px;
}

Lassen Sie uns verstehen, was wir geändert haben:
- Wir haben die Animationsdauer auf 2s (2 Sekunden) verlängert.
- Wir haben die Timing-Funktion auf ease-in-out geändert, was sowohl den Anfang als auch das Ende der Animation glatt macht.
- Wir haben einen border-radius von 10px hinzugefügt, um die Ecken unserer Box abzurunden.
Lassen Sie uns auch unsere Keyframes ändern, um einen Rotationseffekt hinzuzufügen:

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

In dieser aktualisierten Keyframes-Definition:
- Wir haben die rotate()-Funktion zur transform-Eigenschaft hinzugefügt.
- Bei 50% der Animation rotiert das Element jetzt um 45 Grad, während es sich vergrößert.
- Wir ändern auch die Hintergrundfarbe auf blau bei 50% der Animation.
Speichern Sie die Datei style.css nach diesen Änderungen.
Aktualisieren Sie die Registerkarte Web 8080, um Ihre verbesserte Animation zu sehen.

Ihre Animation sollte jetzt langsamer sein (2 Sekunden pro Zyklus), abgerundete Ecken haben, sich beim Zoomen drehen und die Farbe halbwegs durch die Animation ändern. Dies zeigt, wie CSS-Animationen mehrere Eigenschaftsänderungen kombinieren können, um reiche visuelle Effekte zu erzielen.

Fühlen Sie sich frei, weiter mit verschiedenen Eigenschaften und Werten zu experimentieren, um zu sehen, wie sie Ihre Animation beeinflussen.

Zusammenfassung

Herzlichen Glückwunsch, dass Sie das Lab "Zoom in Zoom Out Animation" abgeschlossen haben! In diesem Lab haben Sie gelernt:

Wie man HTML für eine CSS-Animation strukturiert
Wie man Elemente mit grundlegenden CSS-Eigenschaften gestaltet
Wie man Keyframes-Animationen erstellt, die die Stadien einer Animation definieren
Wie man Animationen auf Elemente mit der animation-Eigenschaft anwendet
Wie man Animationen anpasst, indem man die Timing, die Easing-Funktion einstellt und mehrere Eigenschaftsänderungen kombiniert

Diese CSS-Animations-Techniken können eingesetzt werden, um ansprechende Benutzeroberflächen zu erstellen, die auf Benutzerinteraktionen reagieren oder auf wichtige Elemente auf Ihren Webseiten aufmerksam machen.

Um Ihre Lernreise fortzusetzen, sollten Sie andere Animations-Eigenschaften wie animation-delay, animation-direction und animation-fill-mode erkunden. Sie können auch experimentieren, indem Sie andere CSS-Eigenschaften als transform animieren, wie z. B. opacity, position und size.