Vorlesung 7: CSS-Übergänge und Animationen

In dieser Vorlesung erfahren Sie, wie Sie Ihre Webseiten mithilfe von CSS-Übergängen und -Animationen zum Leben erwecken. Mit diesen Techniken können Sie reibungslose, ansprechende Effekte erstellen, die das Benutzererlebnis verbessern, ohne dass JavaScript erforderlich ist.

Einführung in CSS-Übergänge

CSS-Übergänge ermöglichen es Ihnen, Eigenschaftswerte über einen bestimmten Zeitraum hinweg reibungslos zu ändern. Sie eignen sich ideal zum Erstellen von Hover-Effekten, Button-Animationen und anderen interaktiven Elementen.

1. Grundlegende Syntax

Um einen Übergang zu erstellen, müssen Sie die CSS-Eigenschaft für den Übergang, die Dauer und optionale Beschleunigungsfunktionen angeben.

• Beispiel:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

In diesem Beispiel ändert sich die Hintergrundfarbe der Schaltfläche sanft über 0,3 Sekunden, wenn Sie mit der Maus darüber fahren.

2. Mehrere Eigenschaften umstellen

Sie können mehrere Eigenschaften gleichzeitig übertragen, indem Sie sie durch Kommas trennen.

• Beispiel:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

In diesem Beispiel werden Breite, Höhe und Hintergrundfarbe des Felds beim Bewegen der Maus sanft geändert.

3. Beschleunigungsfunktionen

Easing-Funktionen steuern die Geschwindigkeit des Übergangs an verschiedenen Punkten und erzeugen Effekte wie „easing in“, „easing out“ oder beides.

• Gemeinsame Beschleunigungsfunktionen:
  • Leichtigkeit: Beginnt langsam, wird dann schneller und dann wieder langsamer.
  • linear: Behält eine konstante Geschwindigkeit bei.
  • Easy-In: Beginnt langsam und beschleunigt sich dann.
  • Ease-out: Beginnt schnell und verlangsamt sich dann.

Einführung in CSS-Animationen

Mit CSS-Animationen können Sie im Laufe der Zeit komplexere Abfolgen von Änderungen erstellen, die über einfache Übergänge hinausgehen. Sie können mehrere Eigenschaften animieren, das Timing steuern und Keyframes für eine bessere Kontrolle erstellen.

1. Grundlegende Syntax

Um eine Animation zu erstellen, definieren Sie Keyframes und wenden Sie sie mithilfe der Animationseigenschaft auf ein Element an.

• Beispiel:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

In diesem Beispiel:

• Die @keyframes-Regel definiert die Animationsschritte und ändert die Hintergrundfarbe und -position.
• Die .animate-box-Klasse wendet die Animation an, die 5 Sekunden lang läuft und sich unendlich wiederholt.

2. Steuern des Animations-Timings

Sie können das Timing, die Verzögerung und die Anzahl der Iterationen einer Animation steuern.

• Beispiel:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5s: Dauer der Animation.
• easy-in-out: Beschleunigungsfunktion.
• 1s: Verzögerung, bevor die Animation beginnt.
• 3: Die Animation wird dreimal wiederholt.
• alternierend: Die Animation kehrt bei jeder Iteration die Richtung um.

3. Übergänge und Animationen kombinieren

Sie können Übergänge und Animationen zusammen verwenden, um dynamischere Effekte zu erzeugen.

• Beispiel:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

Dieses Beispiel:

• Die .button-Klasse verwendet einen Übergang, um die Schaltfläche beim Hover leicht zu skalieren.
• Die .pulse-button-Klasse verwendet eine Animation, um einen kontinuierlich pulsierenden Effekt zu erzeugen.

Praxisbeispiel:

Kombinieren wir Übergänge und Animationen, um eine reaktionsfähige, interaktive Schaltfläche zu erstellen.

HTML:

Hover Me!

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

In diesem Beispiel:

• Die Schaltfläche ändert ihre Hintergrundfarbe und bewegt sich leicht nach oben, wenn Sie mit der Maus darüber fahren.
• Wenn auf die Schaltfläche geklickt wird, wackelt sie mit einer benutzerdefinierten Animation.

Übungsübung

1. Erstellen Sie einen Hover-Effekt für einen Link, der seine Farbe ändert und mithilfe eines Übergangs eine Unterstreichung hinzufügt.
2. Erstellen Sie eine Keyframe-Animation, die ein Element in einem Kreis bewegt.
3. Kombinieren Sie Übergänge und Animationen, um ein interaktives Element wie eine Schaltfläche oder eine Karte zu erstellen, das sich bei Interaktion skaliert, die Farbe ändert oder animiert.

Nächstes Thema: In der nächsten Vorlesung beschäftigen wir uns mit CSS Flexbox Deep Dive, wo Sie lernen, wie Sie Flexbox vollständig nutzen können, um erweiterte, responsive Layouts zu erstellen. Bleiben Sie dran!

Folgen Sie mir auf LinkedIn

Ridoy Hasan