Erste Schritte mit CSS3-Animation in 10 Minuten

Einführung

Mit Animation können Sie mithilfe von reinem CSS ganz einfach verschiedene Animationseffekte auf Webseiten implementieren, ohne auf JavaScript oder jQuery angewiesen zu sein.

Kompatibilität

Animationen werden in den meisten gängigen Browsern gut unterstützt! Studenten, die noch mit IE9 kompatibel sind, sollten es mit Vorsicht verwenden.

CSS-Koordinatensystem

Bevor wir Animation verstehen, müssen wir zuerst das CSS-Koordinatensystem verstehen, da viele Animationseffekte eng mit den Koordinaten von Elementen zusammenhängen. In CSS3 ist eine Webseite keine zweidimensionale Ebene mehr, sondern ein dreidimensionaler Raum. Die horizontale Richtung, die vertikale Richtung und die senkrechte Bildschirmrichtung entsprechen jeweils den x-, y- und z-Achsen des dreidimensionalen Koordinatensystems, wie in der folgenden Abbildung dargestellt. Die Pfeilrichtung ist positiv, die entgegengesetzte Richtung ist negativ (beachten Sie, dass die Richtung der y-Achse dem herkömmlichen kartesischen Koordinatensystem entgegengesetzt ist).

Animationen

1. Transformationen

Transform wird im Chinesischen mit „Umwandlung“ übersetzt, ich nenne es aber lieber „Deformation“ (die berühmten Transformers heißen Transformer). Mit der Transformationsfunktion können wir HTML-Elemente dazu bringen, verschiedene Deformationen wie Verschiebung, Skalierung, Drehung, Verzerrung usw. auszuführen, ohne den normalen Dokumentfluss zu beeinträchtigen.

(1) Übersetzen

Übersetzen wird im Allgemeinen als „Übersetzung“ übersetzt, in CSS jedoch im Allgemeinen als „Übersetzung“ verwendet, da Übersetzen zum Ändern der Position von HTML-Elementen im 3D-Koordinatensystem verwendet wird. Translate unterstützt das Verschieben in jede Richtung innerhalb des Koordinatensystems (durch jede Kombination von Vektoren in x-, y- und z-Richtung). Die Einheiten können Längeneinheiten und Prozentsätze sein (der Prozentsatz ist relativ zur Größe des zu verschiebenden Elements, die x-Achse ist relativ zur Breite, die y-Achse ist relativ zur Höhe und in z-Richtung kann die z-Richtung nicht in Prozentsätzen ausgedrückt werden, da das Element keine „Dicke“ hat). Beispiel:

transformieren: übersetzenX(100px) übersetzenY(50%) übersetzenZ(-100px);
// Oder abkürzen „transform“: translate3d(100px, 50%, 2em);

Beachten:

translate ist eine 2D-Translation in der xy-Ebene, translate3d ist eine 3D-Translation im xyz-Raum;

translate kann auch allein geschrieben werden, z. B. translate: 50% 105px 5rem; , aber diese Funktion befindet sich noch im experimentellen Stadium und wird von vielen Browsern nicht unterstützt. Daher wird sie derzeit noch in Verbindung mit transform verwendet. Weitere Einzelheiten finden Sie unter MDN Translate.

(2) Maßstab

Skalieren bedeutet „Zoom“ und dient, wie der Name schon sagt, dazu, die Größe eines Elements zu verändern. Zum Beispiel:

transformieren: MaßstabX(2) MaßstabY(0,5) MaßstabZ(1);
// Oder verkürzen Sie transform: scale3d(2, 0.5, 1);

scale Skalierungsmethode akzeptiert als Parameter eine beliebige Zahl (positive oder negative Ganzzahlen, Dezimalzahlen, 0), die den Skalierungsfaktor darstellt. Wenn der Faktor > 1 ist, ist der Effekt eine Vergrößerung; wenn 0 < Faktor < 1 ist, ist der Effekt eine Verkleinerung; wenn der Faktor = 0 ist, wird die Elementgröße unendlich klein und unsichtbar; wenn der Faktor < 0 ist, ist der Effekt ein Spiegelbild des Wertes > 0 (Sie können selbst mit dem spezifischen Effekt experimentieren).

Ähnlich wie translate gibt es auch für scale die zweidimensionale scale() und die dreidimensionale Funktion scale3d() , die auch getrennt geschrieben werden können und hier nicht beschrieben werden.

(3) Drehen

Rotate bedeutet „drehen“ und unterstützt das Drehen von Elementen um die x-, y- und z-Achse. Die positive Drehrichtung ist gegen den Uhrzeigersinn und steht in positiver Richtung der Koordinatenachse. Bitte beachten Sie das Koordinatensystemdiagramm oben. Die rotate -Methode akzeptiert einen Winkel als Parameter. Ein Winkel > 0 führt zu einer Drehung in eine positive Richtung, ein Winkel < 0 zu einer Drehung in eine negative Richtung. Beispiel:

// Standardrotation um die Z-Achse transform: rotate(90deg);
Transformieren: X-Drehung (30 Grad) Y-Drehung (60 Grad) Z-Drehung (-90 Grad);

Im Gegensatz zu „translate“ und „scale“ kann „rotate“ nicht als transform: rotate3d(30deg, 60deg, 90deg) . Die Verwendung von rotate3d ist wie folgt: Die ersten drei Parameter sind Zahlen, die Vektoren in den x-, y- und z-Richtungen darstellen, die addiert werden, um den Vektor v zu erhalten. Der vierte Parameter ist der Winkel, der den Winkel der Drehung gegen den Uhrzeigersinn um den Vektor v darstellt. Die Syntax lautet wie folgt:

transformieren: 3d drehen(1, 2, 3, 90 Grad);

Ähnlich wie translate und scale kann rotate auch als separate CSS-Eigenschaft verwendet werden, befindet sich aber noch im experimentellen Stadium.

Aus Platzgründen liste ich nur die drei am häufigsten verwendeten Transformationsfunktionen auf. Die übrigen Transformationsfunktionen finden Sie unter MDN-Transformationsfunktion.

(4) Kombination

Wir können verschiedene Transformationsmethoden kombinieren, wie zum Beispiel:

transformieren: verschiebeY(200px) dreheZ(90 Grad) skaliere(3);

Die Ausführungsreihenfolge der kombinierten Methode verläuft von rechts nach links, d. h. zuerst wird die Skalierung ausgeführt, dann die Drehung und schließlich die Übersetzung. Die Effekte sind kumulativ. Die Reihenfolge, in der die Methoden geschrieben werden, hat großen Einfluss auf das Endergebnis. Sehen Sie sich das folgende Beispiel an. Die Verschiebung und das Zoomen entlang der Y-Achse führen in unterschiedlicher Reihenfolge zu deutlich unterschiedlichen Ergebnissen:

Wenn Sie zuerst übersetzen und dann skalieren, wird auch die Übersetzungsdistanz proportional skaliert. Wenn Sie jedoch zuerst skalieren und dann übersetzen, geschieht dies nicht. Wenn Sie transform verwenden, müssen Sie es daher in der Reihenfolge translate -> rotate -> scale schreiben. Lassen Sie „scale“ zuerst ausführen, um eine Verstärkung des Effekts von „translate“ zu vermeiden, und „rotate“ wird vor „translate“ ausgeführt, um eine Drehung mit der Translationsdistanz zu verhindern. Ich denke, das ist derzeit der Nachteil der Transformation, da die Interferenzen zwischen den Methoden nicht leicht zu verstehen und die Schreibreihenfolge nicht leicht zu merken ist. In Zukunft wird dieses Problem voraussichtlich durch die Verwendung unabhängiger CSS-Transformationseigenschaften gelöst, da unabhängige Transformationseigenschaften nicht von der Schreibreihenfolge abhängig sind und die Methoden sich nicht gegenseitig beeinträchtigen.

Übergang

Transition wird mit „Übergang“ übersetzt und betont den Prozess. In CSS bezeichnet es den dynamischen Vorgang, bei dem ein Element innerhalb einer bestimmten Zeitspanne von einem Zustand (entspricht einem CSS-Attribut) in einen anderen Zustand übergeht. Wir können entscheiden, wie der Übergang erfolgen soll und wie viel Zeit dafür aufgewendet werden soll.

Um beispielsweise die Wolke größer zu machen, wenn die Maus darüber schwebt, können wir schreiben:

.Wolke{
    Breite: 240px;
    Übergang: 1s;
}
.cloud:hover{
    Breite: 320px;
}

Wirkung:

Übergang kann in Verbindung mit Transformieren verwendet werden. So können wir beispielsweise die Wolke vergrößern und gleichzeitig rotieren lassen:

.cloud:hover{
    Breite: 320px;
    transformieren: drehen (360 Grad);
}

Wirkung:

Für unterschiedliche Effekte können wir unterschiedliche Übergangszeiten einstellen:

.Wolke{
    Breite: 240px;
    Übergang: Breite 1 s, Transformation 0,5 s;
}

Wir können für den Effekt auch eine Verzögerungszeit einstellen, beispielsweise warten wir mit der Drehung bis die Breite zunimmt:

.Wolke{
    Breite: 240px;
    Übergang: Breite 1 s, Transformation 0,5 s 1 s;
}

Wirkung:

Wir können auch für jeden Effekt eine andere Timing-Funktion einstellen, um den Beschleunigungseffekt zu steuern.

Beispielsweise können wir die Rotationsgeschwindigkeit schrittweise erhöhen:

.Wolke{
    Breite: 240px;
    Übergang: Transformation, 2 s Einarbeitung;
}

.cloud:hover{
    transformieren: drehen (1080 Grad);
}

Wirkung:

Weitere Timing-Funktionen werden später erläutert. Sie können auch auf MDN-Übergangs-Timing-Funktionen verweisen.

Schlüsselbilder

(1) Grundlegende Nutzung

Keyframe wird im Chinesischen als „Schlüsselbild“ übersetzt. Es ist eine sehr leistungsstarke Funktion in der Animation. Einfach ausgedrückt können wir Animationen erstellen, indem wir Schlüsselpunkte und Schlüsselzustände in einer Animation definieren. Keyframes ermöglichen eine stärkere Kontrolle über den Animationsprozess und die Details als Übergänge.

Schauen wir uns zunächst ein Beispiel an (ein Teil des Codes wurde weggelassen)

html:

<div Klasse="Himmel"></div>
<div Klasse="gras"></div>
<div Klasse="Straße">
  <div Klasse="Zeilen"></div>
  <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="Mario animiert">
</div>

CSS:

.mario{
  Position: absolut;
  links: 0px;
  Breite: 100px;
}

.animiert{
  Animationsname: Laufwerk;
  Animationsdauer: 1 s;
  Animations-Timing-Funktion: linear;
}

@keyframes fahren {
  von { transform: translateX(0) }
  zu { transform: translateX(700px) }
}

Wirkung:

drive ist der Name des Keyframes, from, to sind die Start- und Endzeit des Keyframe-Wiedergabevorgangs. Der Zeitpunkt kann auch in Prozenten ausgedrückt werden, z. B. 50% , from， to entsprechen 0%, 100% . Jeder Zeitpunkt entspricht einem CSS-Zustand, der einen Keyframe darstellt. Nachdem die Keyframes definiert sind, ist die Verwendung wie folgt:

Es gibt auch Kurzformen für Animationen, wie zum Beispiel:

Animation: Slidein 3 s, Ease-In 1 s, unendlich rückwärts, beides läuft;

Allerdings stellt diese Methode gewisse Anforderungen an die Schreibreihenfolge (die Verzögerung muss nach der Dauer geschrieben werden, für die anderen Parameter gibt es keine Reihenfolgeanforderung und CSS erkennt sie anhand der übergebenen Schlüsselwörter).

(2) Animationsverzögerung

Mit animation-delay können wir die Ausführung der Animation verzögern:

Animationsverzögerung: 2 s;

(3) Animation Füllmodus vorwärts

Im obigen Beispiel können Sie sehen, dass Mario sich nach rechts bewegt und dann zum Ausgangspunkt zurückkehrt. Was wäre, wenn wir möchten, dass er nach Abschluss der Bewegung rechts bleibt? Es ist ganz einfach, wir stellen einfach den Füllmodus der Animation ein:

Animationsfüllmodus: vorwärts

forwards bedeutet, dass das Element nach Abschluss der Animation im Zustand des letzten Frames verbleibt.

rückwärts

Im Gegensatz dazu gibt es backwards , backwards bedeutet, dass das Element nach Abschluss der Animation nicht in den Zustand des ersten Frames zurückkehrt. Stattdessen bedeutet es, dass bei eingestellter animation-delay der Zustand des ersten Frames während des Wartevorgangs vor dem Start der Animation sofort auf das Element angewendet wird. Lassen Sie uns das obige Beispiel leicht ändern, um den Effekt zu sehen:

.animiert{
  Animationsname: Laufwerk;
  Animationsdauer: 1 s;
  Animationsfüllmodus: Rückwärtswörter;
  Animationsverzögerung: 1 s;
  Animations-Timing-Funktion: linear;
}

@keyframes fahren {
  von { transform: translateX(350px) }
  zu { transform: translateX(700px) scale(2) }
}

Wirkung:

Wie Sie sehen, bewegt sich der Mann unmittelbar vor Beginn der Animation auf 350 Pixel und die Animation beginnt 1 Sekunde später.

beide

Offensichtlich werden in beiden Fällen gleichzeitig Vorwärts- und Rückwärtsregeln angewendet, das heißt, der Zustand des ersten Frames wird während der Verzögerung zuerst angewendet und der Zustand des letzten Frames wird am Ende beibehalten.

(3) Animation wiederholen

Wir können die Anzahl der Animationsschleifen über animation-iteration-count festlegen, zum Beispiel:

Anzahl der Animationsiterationen: 3;

// Endlosschleife animation-iteration-count: infinite;

So was:

(4) Animationsrichtung

Normal

Die normale Richtung, die zugleich die Standardrichtung ist, ist zuerst von, dann nach.

umkehren

Entgegen der normalen Richtung, das heißt zuerst zu, dann von. Zum Beispiel:

.animiert{
  ...
  
  Animationsrichtung: rückwärts;
}

@keyframes fahren {
  von { transform: translateX(-100px) rotateY(180deg) }
  zu { transformieren: übersetzenX(862px) drehenY(180 Grad)}
}

Wirkung:

wechseln

Alternate bedeutet „abwechselnd“, also Normal und Rückwärts wechseln sich ab, erst Normal und dann Rückwärts.

umgekehrte Alternative

Abwechselnd in umgekehrter Richtung, erst rückwärts und dann normal.

(4) Animation-Timing-Funktion

Wie Übergänge können auch Keyframes Timing-Funktionen festlegen. Häufig verwendete Timing-Funktionen werden wie folgt zusammengefasst:

• Leichtigkeit: Die Standardmethode, die langsam beginnt, dann beschleunigt und dann verlangsamt
• ease-in: Die Anfangsgeschwindigkeit ist die niedrigste, dann beschleunigt sie
• ease-out: Die Anfangsgeschwindigkeit ist am höchsten und wird dann immer langsamer
• ease-in-out: Die Anfangsgeschwindigkeit ist langsam, dann wird beschleunigt und abgebremst. Der Unterschied zu ease besteht darin, dass der Beschleunigungs- und Abbremsprozess symmetrisch ist
• Linear: Bewegung mit konstanter Geschwindigkeit

Die intuitive Darstellung ist wie folgt (Codepen):

Zusätzlich zu den oben genannten vorgefertigten Methoden können wir die Geschwindigkeitskurve über die Bézierkurve anpassen. Wir können unsere eigenen Bézierkurven visuell unter http://cubic-bezier.com erstellen. Erstellen Sie beispielsweise eine Kurve, die sehr langsam beginnt und dann plötzlich sehr schnell wird:

CSS:

Animations-Timing-Funktion: kubische Bézierfunktion (1, 0,03,1, -0,03);

Wirkung:

Ist das nicht unglaublich?

(5) Kettenanimation

Wir können mehrere Animationen hintereinander verwenden. Wenn wir zum Beispiel möchten, dass der kleine Mann während der Fahrt springt, können wir das so schreiben:

CSS:

.mario {
  ...
  
  Animation: Fahrt 3 s, beide unendlich linear, Sprung 0,5 s 1,2 s, Ein- und Ausfahren unendlich;
}

@keyframes springen {
  0 % { oben: -40px; }
  50 % { oben: -120px; }
  100 % { oben: -40px; }
}

Wirkung:

üben

Der Zweck dieses Artikels besteht darin, die Grundlagen der CSS3-Animation bekannt zu machen. Er deckt das Wissen über Animation nicht vollständig ab. Bitte verzeihen Sie mir, dass ich das Wissen nicht eingebe oder erkläre. Nachdem wir das oben genannte Wissen gemeistert haben, können wir bereits Animationen verwenden, um reichhaltige Animationseffekte zu erstellen. Hier sind einige kleine Beispiele auf Codepen:

vollständige Mario-Demo

animiertes Popup

Artikel in den Warenkorb fliegen

Karten umdrehen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.