CSS-Übergänge und Animationen

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

Mit CSS-Übergängen können Sie Eigenschaftswerte über einen bestimmten Zeitraum hinweg reibungslos ä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 gleichmäßig ü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 Schweben sanft geändert.

3. Beschleunigungsfunktionen

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

• Allgemeine Beschleunigungsfunktionen:
  • Leichtigkeit: Beginnt langsam, wird dann schneller und dann wieder langsamer.
  • linear: Behält eine konstante Geschwindigkeit bei.
  • Einzug: Beginnt langsam und beschleunigt sich dann.
  • Erleichterung: Fängt schnell an und wird dann langsamer.

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.
• Easing-in-out: Easing-Funktion.
• 1s: Verzögerung, bevor die Animation beginnt.
• 3: Die Animation wird dreimal wiederholt.
• Abwechselnd: 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 erzielen.

• 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 Schweben leicht zu skalieren.
• Die .pulse-button-Klasse verwendet eine Animation, um einen kontinuierlich pulsierenden Effekt zu erzeugen.

Praxisbeispiel:

Lassen Sie uns Übergänge und Animationen kombinieren, um eine reaktionsfähige, interaktive Schaltfläche zu erstellen.

HTML:

<button class="animated-button">Hover Me!</button>

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 im Kreis bewegt.
3. Kombinieren Sie Übergänge und Animationen, um ein interaktives Element wie eine Schaltfläche oder eine Karte zu erstellen, das bei Interaktion skaliert, seine Farbe ändert oder animiert wird.

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, reaktionsfähige Layouts zu erstellen. Bleiben Sie dran!

Folgen Sie mir auf LinkedIn

Ridoy Hasan

Das obige ist der detaillierte Inhalt vonCSS-Übergänge und Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!