IT-Kurs CSS-Grundlagen 027_Animation und Übergang

Animation

CSS-Animationen sind Effekte, die verwendet werden können, um die Eigenschaftswerte von Elementen allmählich zu ändern. Animationen können auf jede CSS-Eigenschaft angewendet werden, einschließlich Breite, Höhe, Farbe, Hintergrund, Rahmen usw.

Die Syntax der animation-Eigenschaft ist wie folgt:

• name: Gibt den Namen der Animation an.
• duration: Gibt die Dauer der Animation an.
• timing-function: Gibt die Geschwindigkeitskurve der Animation an.
• delay: Gibt die Verzögerung der Animation an.
• iteration-count: Gibt die Anzahl der Wiederholungen der Animation an.
• direction: Gibt die Abspielrichtung der Animation an.
• fill-mode: Gibt den Stil des Elements nach Abschluss der Animation oder wenn die Animation pausiert oder gestoppt wird.

Beispiel:

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* Animation anwenden, 2 Sekunden Dauer, unendliche Schleife, linearer Übergang */
14
  }

1
    <div class="example1"></div>

Effekt:

• @keyframes rotate definiert eine Keyframe-Animation namens rotate, die vom Anfangszustand (0 Grad Rotation) zum Endzustand (360 Grad Rotation) übergeht.
• Das .animated-box-Element wendet diese Animation an, wobei über die animation-Eigenschaft der Animationsname, die Dauer, die Schleifenart usw. angegeben werden.

CSS-Animationen und CSS-Übergänge sind beides Effekte, die die Eigenschaftswerte von Elementen allmählich ändern können. Die Hauptunterschiede sind:

• Animationen können wiederholt abgespielt werden, während Übergänge nur einmal abgespielt werden können.
• Animationen können die Abspielrichtung angeben, Übergänge nicht.
• Animationen können den Stil des Elements nach Abschluss oder beim Pausieren/Stoppen angeben, Übergänge nicht.

Übergang

CSS-Übergänge sind Effekte, die die Eigenschaftswerte von Elementen allmählich ändern können. Übergänge können auf jede CSS-Eigenschaft angewendet werden, einschließlich Breite, Höhe, Farbe, Hintergrund, Rahmen usw. Der Übergangseffekt kann je nach Browser und Gerät variieren, die Leistung kann je nach Komplexität des Übergangs variieren.

Beispiel:

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* Übergangseigenschaft und -zeit definieren */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

Effekt: