Implementierungsmethoden gängiger CSS3-Animationen

1. Was ist

CSS Animations ist ein vorgeschlagenes Modul für Cascading Style Sheets, das die Animation von Extensible Markup Language (XML)-Elementen mit CSS ermöglicht.

Es bezieht sich auf den Prozess des allmählichen Übergangs von Elementen von einem Stil zu einem anderen.

Es gibt viele gängige Animationseffekte, wie etwa Verschiebung, Drehung, Skalierung usw. Komplexe Animationen sind Kombinationen aus mehreren einfachen Animationen.

Es gibt mehrere Möglichkeiten, Animationen mit CSS zu implementieren:

• Übergang implementiert Verlaufsanimation
• Animation transformieren
• Animation implementiert benutzerdefinierte Animation
  

2. Umsetzung

Übergang implementiert Verlaufsanimation

Die Eigenschaften des Übergangs sind wie folgt:

• Eigenschaft: Füllen Sie die CSS-Eigenschaft aus, die geändert werden muss
• Dauer: Die Zeiteinheit, die zum Abschließen des Übergangseffekts erforderlich ist (s oder ms)
• Timing-Funktion: Die Geschwindigkeitskurve des fertigen Effekts
• Verzögerung: Verzögerung der Auslösezeit des Animationseffekts
  

Die Werte der Timing-Funktion sind wie folgt:

Hinweis: Nicht alle Eigenschaften können in Übergängen verwendet werden, wie z. B. display:none<->display:block

Um beispielsweise den Animationseffekt zu erzielen, der sich ändert, wenn sich die Maus bewegt

<Stil>
       .Basis {
            Breite: 100px;
            Höhe: 100px;
            Anzeige: Inline-Block;
            Hintergrundfarbe: #0EA9FF;
            Rahmenbreite: 5px;
            Rahmenstil: durchgezogen;
            Rahmenfarbe: #5daf34;
            Übergangseigenschaft: Breite, Höhe, Hintergrundfarbe, Rahmenbreite;
            Übergangsdauer: 2s;
            Übergangs-Timing-Funktion: Ease-In;
            Übergangsverzögerung: 500 ms;
        }

        /*Abkürzung*/
        /*Übergang: alle 2 s, 500 ms einlaufen lassen;*/
        .base:hover {
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: #5daf34;
            Rahmenbreite: 10px;
            Rahmenfarbe: #3a8ee6;
        }
</Stil>
<div ></div>

Animation transformieren

Enthält vier häufig verwendete Funktionen:

• übersetzen: Verschiebung
• Maßstab: Zoom
• drehen: drehen
• schräg: Neigung
  

Wird im Allgemeinen bei übermäßiger Überbeanspruchung von Übergängen verwendet.

Beachten Sie, dass „Transform“ keine Inline-Elemente unterstützt. Konvertieren Sie es daher vor der Verwendung in einen Block.

Zum Beispiel

<Stil>
    .Basis {
        Breite: 100px;
        Höhe: 100px;
        Anzeige: Inline-Block;
        Hintergrundfarbe: #0EA9FF;
        Rahmenbreite: 5px;
        Rahmenstil: durchgezogen;
        Rahmenfarbe: #5daf34;
        Übergangseigenschaft: Breite, Höhe, Hintergrundfarbe, Rahmenbreite;
        Übergangsdauer: 2s;
        Übergangs-Timing-Funktion: Ease-In;
        Übergangsverzögerung: 500 ms;
    }
    .base2 {
        transformieren: keine;
        Übergangseigenschaft: transformieren;
        Übergangsverzögerung: 5 ms;
    }

    .base2:hover {
        Transformieren: Skalieren (0,8, 1,5), Drehen (35 Grad), Schrägstellen (5 Grad), Verschieben (15 Pixel, 25 Pixel);
    }
</Stil>
 <div ></div>

Sie können sehen, dass die Box gedreht, gekippt, verschoben und vergrößert wurde.

Animation implementiert benutzerdefinierte Animation

Animation ist eine Abkürzung von 8 Eigenschaften, wie folgt:

Bei der CSS-Animation müssen nur einige Keyframes definiert werden, der Browser berechnet die restlichen Frames anhand der Interpolation der Timing-Funktion.

Definieren Sie Keyframes über @keyframes

Wenn wir also möchten, dass das Element kreisförmig rotiert, müssen wir nur die Start- und End-Frames definieren:

@keyframes drehen{
    aus{
        transformieren: drehen (0 Grad);
    }
    Zu{
        transformieren: drehen (360 Grad);
    }
}

„Von“ bedeutet das erste Bild und „Bis“ bedeutet das letzte Bild.

Sie können auch Prozentsätze verwenden, um den Lebenszyklus zu beschreiben

@keyframes drehen{
    0 %{
        transformieren: drehen (0 Grad);
    }
    50 %{
        transformieren: drehen (180 Grad);
    }
    100 %{
        transformieren: drehen (360 Grad);
    }
}

Nachdem Sie den Keyframe definiert haben, können Sie ihn direkt verwenden:

Animation: 2 s drehen;

Abschluss

Oben finden Sie ausführliche Informationen zu den Implementierungsmethoden gängiger CSS3-Animationen. Weitere Informationen zur Implementierung von CSS3-Animationen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!