10-Animations-Animation

Animation

Da die Spezifikation dieser Technologie noch nicht stabilisiert ist, müssen Sie vor der Verwendung sicherstellen, dass der Browser damit kompatibel ist. Animationen ist ein Modul von CSS3, das Keyframes verwendet, um zu definieren, wie CSS-Eigenschaftswerte im Laufe der Zeit geändert werden. Sie können das Verhalten von Keyframes steuern, indem Sie deren Dauer, Anzahl der Wiederholungen und die Art der Wiederholung angeben. Animationen bestehen aus zwei Teilen: der Konfiguration der CSS-Animation und einer Reihe von Keyframes (die zur Beschreibung des Start-, Prozess- und Endstatus der Animation verwendet werden). Sie müssen keine JS-Technologie kennen, um die Animationsproduktion abzuschließen

-Ähnlichkeiten und Unterschiede zwischen Übergängen und Animationen

1.1 Unterschiede
Der Übergang muss manuell ausgelöst werden, bevor die Animation ausgeführt werden kann
Die Animation kann ohne manuelles Auslösen ausgeführt werden

1.2 Ähnlichkeit
Übergang und Animation werden beide verwendet, um Animationen zu Elementen hinzuzufügen
Übergang und Animation sind neue Attribute des Systems< a i=3> Sowohl Übergang als auch Animation müssen drei Elemente erfüllen, um Animationseffekte zu erzielen

-animation-name gibt den Namen des Keyframes an, der an den Selektor gebunden werden soll, und teilt dem System mit, welche Animation ausgeführt werden muss

Teilen Sie dem System mit, dass wir selbst eine Animation mit dem Namen „animationName“ erstellen müssen

​ Eine Animationssequenz wird über @keyframes festgelegt. Jeder Keyframe in der Sequenz beschreibt, wie das animierte Element innerhalb einer bestimmten Zeit der Animationssequenz gerendert wird. Keyframes verwenden einen Prozentsatz, um die Zeit in der Animationssequenz darzustellen. 0 % stellt die Anfangszeit der Animation dar, die auch durch das Schlüsselwort from dargestellt werden kann. 100 % stellt die Endzeit der Animation dar, die auch durch das Schlüsselwort to dargestellt werden kann.

​ 关键帧：
​ @keyframes animiationName{ ​ keyframes-selector{ ​ CSS-Stil; ​ ​

-animation-duration Die Animation gibt an, wie viele Sekunden oder Millisekunden es dauert, bis sie abgeschlossen ist, und teilt dem System mit, wie lange die Animation dauern wird.

​ time gibt die Zeit an, die benötigt wird, bis die Animation abgeschlossen ist. Der Standardwert ist 0, was bedeutet, dass kein Animationseffekt vorliegt.

-animation-timing-function legt fest, wie die Animation einen Zyklus abschließt und teilt dem System mit, wie schnell die Animation ausgeführt wird.

​ linear Die Geschwindigkeit der Animation ist vom Anfang bis zum Ende gleich.
​ Standardeinstellung. Die Animation beginnt langsam, beschleunigt dann, verlangsamt sich dann und endet schließlich.
​ easy-in Die Animation beginnt mit langsamer Geschwindigkeit.
Die Ease-Out-Animation endet bei niedriger Geschwindigkeit.
Die Easy-In-Out-Animation beginnt und endet mit langsamer Geschwindigkeit.
​ Kubikbezier(n,n,n,n) seinen eigenen Wert in der Kubikbezier-Funktion. Mögliche Werte sind numerische Werte von 0 bis 1.

-animation-delay Legt das Verzögerungsintervall fest, bevor die Animation beginnt.

Die Zeit ist optional. Definiert die Zeit in Sekunden oder Millisekunden, die gewartet werden soll, bevor die Animation beginnt. Der Standardwert ist 0

-animation-iteration-count definiert die Häufigkeit, mit der die Animation abgespielt wird. Teilen Sie dem System mit, wie oft die Animation ausgeführt werden muss

n Eine Zahl, die definiert, wie oft die Animation abgespielt werden soll
unendlich Unendlich oft ausführen

-animation-direction gibt an, ob die Animation abwechselnd rückwärts abgespielt werden soll.

​ normal Der Standardwert, nach einmaliger Ausführung zum Startpunkt zurückkehren und beim nächsten Mal mit der Ausführung fortfahren
​ alternative Roundtrip-Animation, nach einmaliger Ausführung zurückgehen und ausführen Nächstes Mal
umgekehrte umgekehrte Ausführung

-animation-fill-mode gibt den Stil an, der auf das Element angewendet werden soll, wenn die Animation nicht abgespielt wird (wenn die Animation abgeschlossen ist oder wenn es eine Verzögerung gibt, bevor die Animation abgespielt wird).

keine: Keine Änderungen vornehmen
vorwärts: Lassen Sie den Endzustand des Elements den Stil des letzten Frames der Animation beibehalten
rückwärts: Let das Element wait Zeigt den Stil des ersten Frames der Animation während des Status an
​ Beides: Lassen Sie den Wartestatus des Elements den Stil des ersten Frames der Animation anzeigen und lassen Sie den Endstatus des Elements anzeigen Behalten Sie den Stil des letzten Frames der Animation bei

-animation-play-state teilt dem System mit, ob die aktuelle Animation angehalten werden muss

läuft: Animation ausführen
angehalten: Animation anhalten

-Animationsmodul kontinuierliches Schreibformat

​ Animation: Animationsname (animation-name) Animationsdauer (animation-duration) Bewegungsgeschwindigkeit der Animation (animation-timing-function) Verzögerungszeit (animation-delay) Anzahl der Ausführungen (animation-iteration-count) Roundtrip-Animation (animation -Richtung) ;

-Die Abkürzung für Animationsmodul-Fortsetzungsformat

​ Animation: Animationsname, Animationsdauer;

animieren.css

https://animate.style/

1. Führen Sie die CDN- oder lokale animate.css-Datei von animate ein

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

2. Fügen Sie die Klasse „animate__animated <animation name>“ zum angegebenen Element hinzu

<div class="animate__animated animate__fadeInUpBig">你好 animate</div>

2D-Konvertierungsmodul

Die Transformationseigenschaft wendet eine Transformation von 2D oder 3D auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

-drehen drehen

​ transform: rotation(45deg);
​ wobei Grad die Einheit ist, die angibt, wie viele Grad es gibt

-Übersetzen Übersetzen

​ transform: translator(100px, 0px);
​ Der erste Parameter: horizontale Richtung
​ Der zweite Parameter: vertikale Richtung< /a >

-Zoomskala

​ transform: scale(1.5);
​ transform: scale(0.5, 0.5);
​ Erster Parameter: horizontale Richtung< /a > a> ​ Wenn es horizontal und vertikal ist Die Skalierung ist gleich und kann daher als Parameter abgekürzt werden ​ Wenn der Wert kleiner als 1 ist, bedeutet dies, dass er vergrößert werden muss reduziert werden ​ Wenn der Wert größer als 1 ist, bedeutet dies, dass er vergrößert werden muss. ​ Wenn der Wert 1 ist, bedeutet das keine Änderung ​ Hinweise:
​ Zweiter Parameter: vertikale Richtung

-Umfassende Konvertierung fortlaufender Schreibformate

​ transform: rotation(45deg) translator(100px, 0px) scale(1.5, 1.5);
​ /*
​ Hinweis: < /span> ​ */ 2. Das 2D-Konvertierungsmodul ändert das Koordinatensystem des Elements, sodass nach der Drehung keine Übersetzung erfolgt Bei der horizontalen Verschiebung wird sie entsprechend dem Winkel nach der Drehung verschoben
1. Wenn mehrere Transformationen erforderlich sind, trennen Sie diese durch Leerzeichen

-Deformationszentrumspunkt

​ transform-origin:
​ Der erste Parameter: horizontale Richtung
​ Der zweite Parameter: vertikale Richtung

​ Hinweise
​ Es gibt drei Formen von Werten
​ Spezifische Pixel
​ / transform-origin: 200px 0px;/
​ Prozent
​ /Transformationsursprung: 50 % 50 %;/
​ /Transformationsursprung: 0 % 0 % ;/
​ Spezielle Schlüsselwörter
​ /transform-origin: center center ; /
Standardmäßig werden alle Elemente unter Verwendung ihres eigenen Mittelpunkts als Referenz gedreht. Wir können ihn ändern, indem wir das Mittelpunktattribut verformen. Referenzpunkt

-Rotationsachse

​ – Standardmäßig werden alle Elemente um die Z-Achse gedreht
​ transform: rotateZ(45deg);
​ Um die Z-Achse drehen < /span> ​ transform: rotationY(45deg);< /span>
​a> ​ Welche Achse Sie möchten Um sich zu drehen, müssen Sie nach dem Drehen nur noch welche hinzufügen. Verwenden Sie einfach die Achse ​ - Zusammenfassung: ​ Um die y-Achse drehen
​ Um die x-Achse drehen ​ transform: rotationX(45deg);

-Perspektive

Das Attribut definiert den Abstand des 3D-Elements von der Ansicht in Pixeln. Mit diesem Attribut können Sie die Ansicht des 3D-Elements ändern. Wenn das Perspektive-Attribut für ein Element definiert ist, erhalten dessen untergeordnete Elemente den perspektivischen Effekt, nicht das Element selbst .

​ 1. Was ist Perspektive
​ Groß, Nah und Klein
​ 2. Zu beachtende Punkte
​Auf jeden Fall ist zu beachten, dass das Perspektivattribut dem übergeordneten Element des Elements hinzugefügt werden muss, das die Wirkung von nah, groß, fern und klein anzeigen soll

Rezension

1. Flexible Box/flexible Box
Kernkonzept: Stellen Sie display:flex auf ein Element ein, um eine Teleskopbox zu werden, und die elastischen Elemente sind entlang der Hauptachse angeordnet, a> 1. Legen Sie display:flex für das übergeordnete Element und margin:auto für das untergeordnete Element fest a> Transition-Delay legt die Übergangswartezeit fest 4. Animation< /span> 0 % { bis {} Endstatus vom {} Startstatus Animationsstatus @keyframes Animationsname{ 1. Animations-Keyframes definieren Was dem System mitgeteilt werden muss Ein Element muss die Animationsdauer animierenmuss nicht manuell ausgelöst werden Die Abkürzung lautet Transition:Property Duration Timing-Function Delay; Transition-Timing-Function legt die Übergangsgeschwindigkeitskurve fest Transition-Duration legt die Übergangsdauer fest Transition-Property legt die Übergangseigenschaft fest Sie müssen dem System mitteilen, welches Element die Übergangsdauer benötigt Der Übergang muss manuell ausgelöst werden. Hover aktiv @media Änderungen zu Elementen wird nicht sofort wirksam 3. Übergang 2. Anzeige festlegen: für das übergeordnete Element flex;justify-content:center;align-items:center flex-basis setzt die Breite des elastischen Elements standardmäßig auf „Auto“ und hat eine höhere Priorität als die Breite. < /span> align-self ändert die Ausrichtung des elastischen Elements selbst auf der Querachse Flex auf mehrere elastische Elemente einstellen, was dem Zahlenverhältnis entspricht Die Zahl wird auf ein flexibles Element festgelegt und der verbleibende Platz des übergeordneten Containers wird dem flexiblen Element zugewiesen flex:flex-grow flex-shrink flex-basis flex-shrink legt fest, ob Gleichheit ausgeführt werden soll. proportionale Komprimierung, wenn im übergeordneten Container nicht genügend Platz vorhanden ist. Der Standardwert ist gleichproportionale Komprimierung 1 Justify-Content legt fest Ausrichtung des flexiblen Elements in der Hauptachsenrichtung< /span> order ändert die Anordnungsreihenfolge flexibler Elemente. Je größer der Wert, desto weiter hinten liegt er. 3. Elementattribute: align-content Legt die mehrzeilige Ausrichtung von fest flexible Elemente align-items Legt die Querachsenausrichtung flexibler Elemente fest Flex-Flow Flex-Direction Flex-Wrap-Abkürzung Flex-Wrap legt fest, ob die Anzeige umbrochen werden soll und nicht standardmäßig. Flex-Direction ändert die Richtung der Hauptachsenanordnung Anzeige: 2. Containereigenschaften:
Die Hauptachse ist standardmäßig horizontal und die Querachse standardmäßig vertikal.

  }
  25%{

  }
  50%{

  }
  100%{

  }
}

2. Animation für Elemente festlegen
animation-name Animationsnamen festlegen
animation-duration Animationsdauer festlegen
animation-timing-function legt die Animationsgeschwindigkeitskurve fest
animation-delay legt die Animationswartezeit fest
animation-iteration-count legt die Anzahl der Animationsiterationen fest. Zahl unendlich ( Endlosschleife)