CSS-Animationen

CSS-Animationen bieten eine ausgefeilte Möglichkeit, die Benutzererfahrung durch sanfte, visuell ansprechende Übergänge und Effekte zu verbessern. In diesem umfassenden Leitfaden gehen wir auf die Feinheiten von CSS-Animationen ein und bieten detaillierte Erklärungen, Beispiele und Best Practices, um dynamische und responsive Designs zu erstellen.

Einführung in CSS-Animationen

CSS-Animationen ermöglichen es Webentwicklern, HTML-Elemente zu animieren, ohne auf JavaScript zurückgreifen zu müssen. Sie werden mit Keyframes definiert, die die Stile zu verschiedenen Zeitpunkten der Animationsabfolge festlegen.

Einfaches CSS-Animationsbeispiel

---

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Try it Yourself »

WARNING

Testen Sie Animationen immer auf verschiedenen Geräten und in verschiedenen Browsern, um eine reibungslose Leistung zu gewährleisten.

Wichtige Eigenschaften von CSS-Animationen

• animation-name: Legt den Namen der Keyframes fest.
• animation-duration: Definiert die Dauer der Animation.
• animation-timing-function: Legt die Geschwindigkeitskurve der Animation fest.
• animation-delay: Verzögert den Start der Animation.
• animation-iteration-count: Definiert, wie oft die Animation abgespielt werden soll.
• animation-direction: Legt fest, ob die Animation in alternativen Zyklen rückwärts abgespielt werden soll.

Mehrere Animationen anwenden

Sie können mehrere Animationen auf ein einzelnes Element anwenden, indem Sie sie durch Kommas trennen.

---

<div class="multi-animated-box"></div>

<style>
  .multi-animated-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: move 4s infinite, rotate 2s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }

  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Try it Yourself »

Fortgeschrittene Techniken

Responsive Animationen

Stellen Sie sicher, dass Animationen responsiv sind und sich an verschiedene Bildschirmgrößen anpassen.

---

<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 50vw;
    height: 50vw;
    background-color: green;
    animation: resize 4s infinite;
  }

  @keyframes resize {
    0% { width: 50vw; height: 50vw; }
    50% { width: 70vw; height: 70vw; }
    100% { width: 50vw; height: 50vw; }
  }
</style>

Try it Yourself »

Transformationen kombinieren

Kombinieren Sie mehrere Transformationseigenschaften, um komplexe Animationen zu erstellen.

---

<div class="complex-transform-box"></div>

<style>
  .complex-transform-box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    animation: complexTransform 5s infinite;
  }

  @keyframes complexTransform {
    0% {
      transform: translateX(0) rotate(0deg) scale(1);
    }
    50% {
      transform: translateX(200px) rotate(180deg) scale(1.5);
    }
    100% {
      transform: translateX(0) rotate(360deg) scale(1);
    }
  }
</style>

Try it Yourself »

Füllmodi von Animationen

Die Eigenschaft animation-fill-mode definiert, wie eine CSS-Animation Stile auf ihr Ziel vor und nach der Ausführung anwendet.

---

<div class="fill-mode-box"></div>

<style>
  .fill-mode-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    animation: fillMode 3s forwards;
  }

  @keyframes fillMode {
    0% { background-color: purple; }
    100% { background-color: orange; }
  }
</style>

Try it Yourself »

Animationsverzögerungen und Timing-Funktionen

Verwenden Sie Animationsverzögerungen und Timing-Funktionen, um das Tempo und den Start von Animationen zu steuern.

---

<div class="timing-function-box"></div>

<style>
  .timing-function-box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: timingFunction 4s ease-in-out infinite;
  }

  @keyframes timingFunction {
    0% { transform: translateY(0); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(0); }
  }
</style>

Try it Yourself »

Best Practices für CSS-Animationen

1. CPU-Nutzung minimieren: Halten Sie Animationen einfach, um eine übermäßige CPU-Nutzung zu vermeiden, die die Leistung beeinträchtigen kann, insbesondere auf mobilen Geräten.
2. Hardwarebeschleunigung nutzen: Verwenden Sie die Eigenschaften transform und opacity, um die GPU-Beschleunigung zu nutzen.
3. Fallbacks: Stellen Sie Fallback-Stile für Browser bereit, die Animationen nicht unterstützen.
4. Leistungstests: Testen Sie Animationen auf verschiedenen Geräten und in verschiedenen Browsern, um eine reibungslose Leistung zu gewährleisten.

INFO

Sie können JavaScript verwenden, um interaktivere Animationen zu erstellen. Siehe JavaScript-Animationen.

Beispiel einer gut optimierten Animation

---

<div class="optimized-box"></div>

<style>
  .optimized-box {
    width: 100px;
    height: 100px;
    background-color: cyan;
    animation: optimizedMove 3s ease-in-out infinite;
  }

  @keyframes optimizedMove {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(200px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
  }
</style>

Try it Yourself »

Fazit

CSS-Animationen sind ein leistungsstarkes Werkzeug zur Erstellung dynamischer und ansprechender Web-Erlebnisse. Durch das Beherrschen von Keyframes, Animationseigenschaften und fortgeschrittenen Techniken können Entwickler Animationen im professionellen Maßstab erstellen, die die Benutzerinteraktion verbessern. Experimentieren Sie mit verschiedenen Animationen, testen Sie gründlich und halten Sie sich an Best Practices, um die besten Ergebnisse zu erzielen.

Praxis

Welche der folgenden Aussagen über CSS-Animationen sind korrekt?

CSS-Animationen werden mit Keyframes definiert.Die Eigenschaft 'animation-name' legt den Namen der Keyframes fest.JavaScript wird benötigt, um CSS-Animationen zu erstellen.Die Eigenschaft 'animation-duration' legt die Geschwindigkeitskurve der Animation fest.CSS-Animationen können mehrere Animationen auf ein einzelnes Element anwenden, indem sie durch Kommas getrennt werden.Die Eigenschaft 'animation-iteration-count' definiert, wie oft die Animation abgespielt werden soll.CSS-Animationen können nicht auf Bildschirmgrößen reagieren.