Bringen Sie Leben in Ihre Webseiten: Ein Tauchgang in CSS-Animationen

CSS-Animationen bringen Dynamik und Interaktivität auf Ihre Webseiten und verwandeln statische Elemente in visuell ansprechende Erlebnisse. Dieses Tutorial führt Sie durch die Grundlagen von CSS-Animationen und ermöglicht es Ihnen, subtile Bewegungen hinzuzufügen oder komplexe interaktive Effekte zu erstellen.

Verstehen der Kernkonzepte:

• Keyframes: Keyframes sind der Eckpfeiler von CSS-Animationen und definieren den Anfangs- und Endzustand (und möglicherweise Zwischenschritte) einer Animation. Sie verwenden die @keyframes Regel, um diese Zustände zu definieren.
• Animationseigenschaften: Sobald Sie Keyframes definiert haben, wenden Sie diese auf ein Element an, indem Sie die Animation Eigenschaft. Diese Eigenschaft gibt Details wie den Namen der Animation (mit Verweis auf Ihre Keyframes), die Dauer, die Zeitfunktion (wie die Animation zeitlich verläuft), die Anzahl der Wiederholungen (wie oft sie abgespielt wird) und mehr an.

Bauen Sie Ihre erste Animation:

Lassen Sie uns eine einfache Animation erstellen, die eine Schaltfläche leicht pulsieren lässt:

.pulsierende-Schaltfläche {
  Grenze: 2px solide #333;
  Polsterung: 10px 20px;
  Hintergrundfarbe: #ddd;
  Cursor: Zeiger;
  Position: relativ;  /* Erforderlich für die Positionierung von Pseudo-Elementen */
}

.pulsierende-Schaltfläche::nach {
  Inhalt: "";
  Position: absolut;
  einfügen: 0;  /* Dehnt das Element so, dass es den gesamten Bereich der Schaltfläche ausfüllt */
  Animation: pulsieren 0.7s stufenlos ein- und aussteigen;
  Hintergrundfarbe: rgba(255, 255, 255, 0.3); /* Halbtransparentes Weiß */
}

@keyframes pulsieren {
  von { Opazität: 1.0; }
  zu { Opazität: 0.8; }
}

Erläuterung:

1. Wir definieren eine Klasse pulsierende Taste für den Schaltflächenstil.
2. Innerhalb der Klasse fügen wir ein Pseudo-Element ::nach um ein unsichtbares Element zu erstellen, das sich hinter der eigentlichen Schaltfläche befindet. Dies ermöglicht den Animationseffekt, ohne die Funktionalität der Schaltfläche zu beeinträchtigen.
3. Die Animation Eigenschaft des Pseudo-Elements verweist auf die pulsieren Animation, die mit der Option @keyframes Regel.
4. Die @Schlüsselbilder pulsieren Regel definiert zwei Keyframes:
   • von: setzt die Deckkraft auf 100% (vollständig sichtbar).
   • zu: setzt die Deckkraft auf 80% (leicht transparent), wodurch ein pulsierender Effekt entsteht.

Erforschung der Animationseigenschaften:

Die Animation Eigenschaft bietet verschiedene Optionen zur Anpassung Ihrer Animationen:

• animation-name: Verweist auf den Namen Ihrer Keyframes-Definition (z. B., Animation-Name: pulsieren).
• animation-duration: Legt die Dauer der Animation fest (z.B., Animation-Dauer: 1s).
• animation-timing-function: Steuert das Tempo der Animation (z.B., animation-timing-function: ease-in-out). Übliche Optionen sind erleichtern (Standard, schrittweiser Beginn und Ende), linear (konstante Geschwindigkeit), Einfaches Einsteigen (langsamer Beginn, schnelles Ende), und aussteigen (schneller Anfang, langsames Ende).
• animation-iteration-count: Legt fest, wie oft die Animation abgespielt wird (z.B., Anzahl der Animationsiterationen: unendlich).
• Richtung der Animation: Gibt die Richtung der Animationswiedergabe an (z.B., Animationsrichtung: alternativ für wechselnde Richtungen).
• Animationsverzögerung: Legt eine Verzögerung fest, bevor die Animation beginnt (z. B., Animation-Verzögerung: 0.5s).

Kombinieren von Animationen für komplexe Effekte:

Sie können mehrere Animationen auf ein einzelnes Element anwenden und so komplexere Effekte erzeugen. So können Sie beispielsweise den pulsierenden Effekt mit einer Farbwechselanimation kombinieren, um die Interaktion mit einer Schaltfläche auffälliger zu gestalten.

Fortgeschrittene Techniken:

Im weiteren Verlauf erkunden Sie fortgeschrittene Animationstechniken wie:

• Verwandlungen: Animieren Sie Elementeigenschaften wie Position, Drehung, Skalierung und Neigung mit umwandeln Eigenschaften innerhalb von Keyframes.
• Animation Shorthand: Kombinieren Sie Animationseigenschaften wie animation-duration, animation-timing-functionund animation-iteration-count zur Vereinfachung der Syntax zu einer einzigen Eigenschaft zusammenfassen.
• Animation Veranstaltungen: Nutzen Sie Ereignisse wie Animationsstart und zu animieren. um JavaScript-Code an bestimmten Punkten im Animationszyklus auszulösen.

Ressourcen für weitere Erkundungen:

• CSS-Animationen Tutorial von W3Schools (https://www.w3schools.com/css/css3_animations.asp): Eine umfassende Einführung in CSS-Animationen mit Beispielen und Referenzen.
• CSS-Animationen Tutorial von CSS-Tricks (https://css-tricks.com/almanac/properties/a/animation/): Eine ausführliche Anleitung mit Erklärungen und Codeschnipseln für verschiedene Animationen

.rotating-banner {
  Breite: 200px;
  Höhe: 150px;
  Hintergrundfarbe: #ccc;
  Marge: 0 Auto;
  Animation: rotieren 5s linear unendlich;
}

@keyframes Drehen {
  von { umwandeln: rotieren(0Grad); }
  zu { umwandeln: rotieren(360 Grad); }
}

.bounce {
  Animation: bounce 1s unendliches Rausgehen;
}

@keyframes abprallen {
  0%, 100% { umwandeln: translateY(0); }
  50% { umwandeln: translateY(-10px); }
}

.button {
  ... (Taste Stile) ...
  Animation: Highlight 0.5s ease-in-out;
}

.button:schweben {
  Animation: keine;  /* Deaktivieren der Animation beim Hovern */
}

@keyframes hervorheben {
  von { Hintergrundfarbe: #ddd; }
  zu { Hintergrundfarbe: #ffe0e0; }
}

.button.geklickt {
  Animation: Highlight-Rückwärts 0.5s ease-in-out;
}

@keyframes highlight-reverse {
  von { Hintergrundfarbe: #ffe0e0; }
  zu { Hintergrundfarbe: #ddd; }
}

/* JavaScript hinzufügen, um auf das Klick-Ereignis zu warten und die Klasse 'angeklickt' umzuschalten */