Aus früheren Studien wissen wir, dass mit dem Übergangsattribut eine einfache Übergangsanimation erreicht werden kann, die Übergangsanimation jedoch nur den Start- und Endstatus angeben kann. Der gesamte Prozess wird durch eine bestimmte Funktion gesteuert, was nicht sehr flexibel ist. In diesem Abschnitt stellen wir eine komplexere Animation vor – die Animation.
Animation: Ähnlich wie beim Übergang können einige dynamische Effekte erzielt werden. Der Unterschied besteht darin, dass der Übergang ausgelöst werden muss, wenn sich ein bestimmtes Attribut ändert, während Animationseffekte automatisch dynamische Effekte auslösen können. Um Animationseffekte festzulegen, müssen Sie zunächst einen Keyframe festlegen. Keyframes legen jeden Schritt der Animationsausführung fest. Das Format der Keyframe-Einstellungen ist wie folgt:
<style>/*Animations-Keyframes definieren. Der Name des Keyframes ist test*/@keyframestest{/*from gibt die Startposition der Animation an, die auch durch 0 % ausgedrückt werden kann. */from{margin-left:0;}/*to gibt die Endposition der Animation an, die auch durch 100 % ausgedrückt werden kann. */to{margin-left:100%;}}</style>Die Animation in CSS ähnelt der Frame-by-Frame-Animation in Flash. Sie ist empfindlich und sehr flexibel. Die Verwendung von Animationen in CSS kann in vielen Webseiten dynamische Bilder, Flash-Animationen oder Spezialeffekte ersetzen.
Unter Animation versteht man den Effekt, dass ein Element schrittweise von einem Stil in einen anderen wechselt. Wir können so viele Stile ändern, wie wir möchten, so oft wir möchten (sehr offizielle Antwort).
CSS3animation (Animation)-Eigenschaft.
@keyframes
Mit der @keyframes-Regel können wir Animationen erstellen.
Animationen werden erstellt, indem nach und nach ein Satz von CSS-Stilen in einen anderen umgewandelt wird. Wir können diesen Satz CSS-Stile während der Animation mehrmals ändern. Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „from“ und „to“, die 0 % und 100 % entsprechen.
0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten wir immer 0 %- und 100 %-Selektoren definieren. Hier ist 0 % ein Frame, 50 % ein Frame und 100 % ebenfalls ein Frame.
Verwenden Sie abschließend die Animationseigenschaften, um das Erscheinungsbild der Animation zu steuern und die Animation an den Selektor zu binden
Animationsname erforderlich. Definiert den Namen der Animation.
Keyframes-Selektor erforderlich. Zulässige Werte für den Prozentsatz der Animationsdauer: 0–100 % von (entspricht 0 %) bis (entspricht 100 %)
CSS-Stile erforderlich. Eine oder mehrere zulässige CSS-Stileigenschaften
Zum Beispiel:
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;left:100px;background:yellow; }75 %{top:100px;left:0px;background:green;}100 %{top:0px;left:0px;background:red;}}1. Attribut „animation-name“: Legen Sie den Animationsnamen fest, der an das Element gebunden werden muss.
Das Attribut „animation-name“ wird verwendet, um die Animation an das angegebene HTML-Element zu binden. Die optionalen Werte des Attributs sind wie folgt:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75 %{top:200px;left:0px;}100 %{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: relative;animation-name:ball;}</style></head><body><div></div></body></html>Laufergebnisse:
Hinweis: Damit die Animation erfolgreich abgespielt werden kann, müssen Sie auch das Attribut „animation-duration“ definieren. Andernfalls wird die Animation nicht abgespielt, da der Standardwert des Attributs „animation-duration“ 0 ist.
2. Attribut „animation-duration“: Definiert, wie viele Sekunden oder Millisekunden es dauert, bis die Animation einen Zyklus abschließt.
● Zeit: Geben Sie die Zeit an, die benötigt wird, bis die Animation abgeschlossen ist. Der Standardwert ist 0, was bedeutet, dass kein Animationseffekt vorliegt.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75 %{top:200px;left:0px;}100 %{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: relative;animation-name:ball;animation-duration:2s;}</style></head><body><div></div></body></html>3. Animation-Timing-Funktion: Die verwendete mathematische Funktion wird als kubische Bezier-Kurve und Geschwindigkeitskurve bezeichnet. Mit dieser Funktion können Sie Ihren eigenen Wert oder einen der vordefinierten Werte verwenden.
●linear: Die Geschwindigkeit der Animation ist vom Anfang bis zum Ende gleich;
●ease: Standard. Die Animation beginnt langsam, beschleunigt sich dann und verlangsamt sich, bevor sie endet.
●ease-in: Die Animation startet mit niedriger Geschwindigkeit;
●ease-out: Die Animation endet mit einer niedrigen Geschwindigkeit;
●ease-in-out: Die Animation beginnt und endet mit niedriger Geschwindigkeit;
●cubic-bezier (n,n,n,n): Verwenden Sie die Funktion „cubic-bezier()“, um die Wiedergabegeschwindigkeit der Animation zu definieren. Der Wertebereich des Parameters liegt zwischen 0 und 1.
4. Animationsverzögerungsattribut: Definiert, wann die Animation beginnt.
●Zeit: optional. Definiert die Zeit in Sekunden oder Millisekunden, die gewartet werden soll, bevor die Animation beginnt. Der Standardwert ist 0.
Hinweis: Die Einheit kann Sekunden (s) oder Millisekunden (ms) sein.
5. Attribut „animation-iteration-count“: Definiert, wie oft die Animation abgespielt werden soll.
Optionale Werte für das Attribut sind wie folgt:
6. Attribut „animation-direction“: Definiert, ob die Animation in einer Schleife rückwärts abgespielt werden soll.
●normal: Standardwert. Die Animation wird normal abgespielt;
●umgekehrt: Animation wird rückwärts abgespielt;
●Alternativ: Die Animation wird in ungeraden Zahlen (1, 2, 5...) vorwärts und in geraden Zahlen (2, 4, 6...) rückwärts abgespielt.
●Alternate-Reverse: Die Animation wird zu ungeraden Zeiten (1, 3, 5...) in Rückwärtsrichtung und zu geraden Zeiten (2, 4, 6...) in Vorwärtsrichtung abgespielt.
7. Attribut „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 die Animation eine Verzögerung aufweist, bevor sie abgespielt wird).
Hinweis: Standardmäßig wirken sich CSS-Animationen nicht auf ein Element aus, bis der erste Keyframe abgespielt wurde, und wirken sich nicht mehr auf das Element aus, nachdem der letzte Keyframe abgeschlossen ist. Die Eigenschaft „animation-fill-mode“ überschreibt dieses Verhalten.
●kein Standardwert. : Die Animation wendet vor und nach der Ausführung der Animation keine Stile auf das Zielelement an.
● vorwärts: Nach dem Ende der Animation (bestimmt durch die Anzahl der Animationsiterationen) wendet die Animation diesen Attributwert an.
●rückwärts: Die Animation wendet die Eigenschaftswerte an, die im Keyframe definiert sind, der die erste Iteration der Animation während der Animationsverzögerungsdefinition gestartet hat. Dies sind Werte im Von-Keyframe (wenn die Animationsrichtung „normal“ oder „alternativ“ ist) oder im Bis-Keyframe (wenn die Animationsrichtung „umgekehrt“ oder „alternativ-umgekehrt“ ist);
●Beide Animationen folgen den Regeln des Vorwärts- und Rückwärtsfahrens. Das heißt, die Animation erweitert die Animationseigenschaft in beide Richtungen.
8.animation-play-state: Gibt an, ob die Animation ausgeführt oder pausiert wird.
●paused: Gibt an, dass die Animation angehalten werden soll.
●running: Geben Sie die laufende Animation an.
9. initial: Setzt die Eigenschaft auf ihren Standardwert.
●initial: Das Schlüsselwort wird verwendet, um CSS-Eigenschaften auf ihre Standardwerte festzulegen.
●initial: Das Schlüsselwort kann für jedes CSS-Attribut in jedem HTML-Element verwendet werden.
10. erben: Attribute von übergeordneten Elementen erben.
●inherit: Das Schlüsselwort gibt an, dass ein Attribut seinen Wert vom übergeordneten Element erben soll.
●inherit: Das Schlüsselwort kann für jedes CSS-Attribut in jedem HTML-Element verwendet werden.
Animation
Das Animationsattribut ist die Abkürzung für Animationsname, Animationsdauer, Animations-Timing-Funktion, Animationsverzögerung, Animationsiterationsanzahl, Animationsrichtung, Animationsfüllmodus und Animationswiedergabestatus Die Animation Das Attribut kann mehrere der oben genannten Attribute gleichzeitig definieren. Das Syntaxformat ist wie folgt:
Animation:AnimationsnameAnimationsdauerAnimation-Timing-FunktionAnimation-VerzögerungAnimation-Iteration-AnzahlAnimation-RichtungAnimation-FüllmodusAnimation-Wiedergabestatus;
Jeder Parameter entspricht jedem oben eingeführten Attribut. Wenn einer oder mehrere der Werte weggelassen werden, wird der dem Attribut entsprechende Standardwert verwendet.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Animation</title><style>.box1{width:700px;height:500px;background-color:silver;}.box2{width :100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animation-timing-function:linear; *//*animation-iteration-count:4;*//*animation-direction:alternate;*//*animation-fill-mode:backwards;*//*animation-delay:2s;*/animation:test2slinear1s4alternate; }/*Animations-Keyframes definieren. Der Name des Keyframes ist test*/@keyframestest{/*from gibt die Startposition der Animation an, die auch durch 0 % ausgedrückt werden kann. */from{margin-left:50px;background-color:orange;}/*to gibt die Endposition der Animation an, die auch durch 100 % ausgedrückt werden kann. */to{margin-left:600px;background-color:yellow;}}/*Laufen der Animation steuern*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>