Animierte CSS-Beispiele. Neun einfache CSS3-Animationsbeispiele
Viele Besucher haben eine Frage zur praktischen Verwendung der Animate.css-Bibliothek. In Wirklichkeit passiert alles ganz einfach, Sie müssen nur alle Phasen einmal durchlaufen und dann analog einige Aktionen wiederholen.
1. Zuerst müssen Sie die Bibliothek herunterladen und verbinden. Es gibt drei Möglichkeiten.
- Vollversion . Enthält mehr als dreitausend Codezeilen mit einem Volumen von etwa 60 kB. Es eignet sich gut für die erste Phase, in der Sie sich mit Animationen im Allgemeinen vertraut machen, da Sie so einen Blick darauf werfen können, wie alles funktioniert.
- Verpackte Version (in professioneller Hinsicht verschleiert). Die CSS-Datei enthält keine Tabulatoren, Leerzeichen oder Zeilenumbrüche. Dadurch verringert sich die Dateigröße um das Eineinhalbfache, es wird jedoch schwieriger, den Code zu lesen.
- Selektive Effekte. Für die meisten Aufgaben bestens geeignet, da Sie damit nur die Effekte festlegen können, die Ihnen gefallen, und unnötige Effekte eliminieren.
2. Um einen Animationseffekt auf das gewünschte Element anzuwenden, fügen Sie ihm zwei Klassen hinzu – animiert und eine Klasse mit dem Namen des Effekts, zum Beispiel fadeInDown (siehe Liste aller Effekte und ihrer Namen). Angenommen, Sie möchten allen Bildern auf einer Seite Flimmern hinzufügen. In HTML schreiben wir Folgendes:
Wenn die Site jQuery verwendet, wird das Hinzufügen von Klassen vereinfacht und über JavaScript durchgeführt.
$(document).ready(function() ( $("img").addClass("animated flash"); ))
3. Die Animation selbst wird automatisch aktiviert, wenn die Seite geladen wird. Dies ist nützlich für Popup-Nachrichten, die die Aufmerksamkeit des Benutzers erregen sollen (Beispiel 1).
Beispiel 1: Popup-Nachricht
Warnung .warning ( Hintergrund: #fc0; Polsterung: 10 Pixel; Rand: 1 Pixel durchgezogen #000; ) Die Zenitstundenzahl schätzt den äquatorialen Sextanten!
Damit der Effekt funktioniert, wenn Sie mit dem Mauszeiger über ein Element fahren, müssen Sie JavaScript verwenden. Betrachten Sie als Beispiel Bilder, die sich bewegen, wenn Sie mit der Maus darüber fahren. Gehe zum Markieren Fügen Sie die animierte Klasse hinzu und verbinden Sie jQuery (Beispiel 2).
Beispiel 2. Galerie
Galerie $(document).ready(function() ( $("img.animated").hover(function() ( $(this).addClass("bounce"); // Die Bounce-Klasse hinzufügen), function() ( $(this).removeClass("bounce"); // Klasse entfernen )))) 
Wenn Sie in diesem Beispiel mit der animierten Klasse den Mauszeiger über ein Bild bewegen, wird eine weitere Bounce-Klasse hinzugefügt. Wenn der Cursor entfernt wird, wird auch die Bounce-Klasse entfernt.
4. Abschließend können Sie die Animation nach Ihren Wünschen anpassen, indem Sie die Animationsgeschwindigkeit ändern und die Verzögerungszeit über CSS festlegen. Beide sind optional und können bei Bedarf genutzt werden.
Animiert ( -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o -animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; )
CSS3-Animationen machen Websites dynamisch. Es erweckt Webseiten zum Leben und verbessert das Benutzererlebnis. Im Gegensatz zu CSS3-Übergängen basiert die Animationserstellung auf Keyframes, die es Ihnen ermöglichen, Effekte für eine bestimmte Zeit automatisch abzuspielen und zu wiederholen sowie die Animation innerhalb einer Schleife zu stoppen.
CSS3-Animationen können für fast alle HTML-Elemente sowie die Pseudoelemente:before und:after verwendet werden. Die Liste der animierten Eigenschaften ist auf der Seite angegeben. Vergessen Sie beim Erstellen von Animationen nicht mögliche Leistungsprobleme, da die Änderung einiger Eigenschaften viele Ressourcen erfordert.
Einführung in die CSS-Animation BrowserunterstützungIE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Oper: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Android-Browser: 44, 4.1 -webkit-
Chrome für Android: 44
Keyframes werden verwendet, um Animationseigenschaftswerte an verschiedenen Punkten in der Animation anzugeben. Keyframes definieren das Verhalten eines Animationszyklus; Die Animation kann null oder mehrmals wiederholt werden.
Keyframes werden mithilfe der @keyframes-Regel angegeben, die wie folgt definiert ist:
Name der @keyframes-Animation (Regelliste)
Das Erstellen einer Animation beginnt mit dem Festlegen der Keyframes der @keyframes-Regel. Frames bestimmen, welche Eigenschaften in welchem Schritt animiert werden. Jeder Frame kann einen oder mehrere Deklarationsblöcke mit einem oder mehreren Eigenschafts- und Wertpaaren enthalten. Die @keyframes-Regel enthält den Namen der Animation des Elements, der die Regel und den Deklarationsblock des Elements verknüpft.
@keyframes Schatten ( von (text-shadow: 0 0 3px black;) 50 % (text-shadow: 0 0 30px black;) bis (text-shadow: 0 0 3px black;) )
Keyframes werden mit den Schlüsselwörtern from und to (entspricht den Werten 0 % und 100 %) oder mit Prozentpunkten erstellt, von denen beliebig viele angegeben werden können. Sie können auch Schlüsselwörter und Prozentpunkte kombinieren. Wenn Frames die gleichen Eigenschaften und Werte haben, können sie in einer Deklaration zusammengefasst werden:
@keyframes verschieben ( von, nach ( oben: 0; links: 0; ) 25 %, 75 % (oben: 100 %;) 50 % (oben: 50 %;) )
Wenn keine 0 %- oder 100 %-Frames angegeben sind, erstellt der Browser des Benutzers diese mithilfe der berechneten (ursprünglich festgelegten) Werte der animierten Eigenschaft.
Wenn mehrere @keyframes-Regeln mit demselben Namen definiert sind, wird die letzte in der Dokumentreihenfolge ausgelöst und alle vorherigen werden ignoriert.
Sobald die @keyframes-Regel deklariert ist, können wir sie in der Animationseigenschaft referenzieren:
H1 (Schriftgröße: 3,5 em; Farbe: Dunkelmagenta; Animation: Schatten 2s unendliches Easy-In-Out; )
Es wird nicht empfohlen, nicht numerische Werte zu animieren (mit seltenen Ausnahmen), da das Ergebnis im Browser unvorhersehbar sein kann. Sie sollten auch keine Keyframes für Eigenschaftswerte erstellen, die keinen Mittelpunkt haben, wie z. B. die Eigenschaftswerte color: pink und color: #ffffff , width: auto und width: 100px oder border-radius: 0 und border- Radius: 50 % (in diesem Fall wäre es richtig, den Randradius anzugeben: 0 %).
1.1. Timing-Funktion für SchlüsselbilderEine Keyframe-Stilregel kann auch eine temporäre Funktion deklarieren, die verwendet werden soll, wenn die Animation zum nächsten Keyframe wechselt.
Beispiel
@keyframes bounce ( from ( top: 100px; Animation-Timing-Function: Easy-Out; ) 25 % ( Top: 50 Pixel; Animation-Timing-Function: Easy-In; ) 50 % ( Top: 100 Pixel; Animation-Timing- Funktion: Ease-Out;) 75 % (oben: 75 Pixel; Animation-Timing-Funktion: Ease-In;) bis (Oben: 100 Pixel;))
Für die Animation mit dem Namen „bounce“ werden fünf Keyframes angegeben. Zwischen dem ersten und zweiten Keyframe (also zwischen 0 % und 25 %) kommt die Easing-Funktion zum Einsatz. Zwischen dem zweiten und dritten Keyframe (also zwischen 25 % und 50 %) kommt die Funktion „Smooth Acceleration“ zum Einsatz. Usw. Das Element bewegt sich auf der Seite um 50 Pixel nach oben, verlangsamt sich, wenn es seinen höchsten Punkt erreicht, und beschleunigt sich dann, wenn es auf 100 Pixel sinkt. Die zweite Hälfte der Animation verhält sich ähnlich, verschiebt das Element jedoch nur um 25 Pixel nach oben auf der Seite.
Die im to- oder 100 %-Keyframe angegebene Timing-Funktion wird ignoriert.
2. Animationsname: Animationsname-EigenschaftDie Eigenschaft „animationsname“ gibt die Liste der auf das Element angewendeten Animationen an. Jeder Name wird verwendet, um einen Keyframe in einer Regel auszuwählen, die Eigenschaftswerte für die Animation bereitstellt. Wenn der Name mit keinem Keyframe in der Regel übereinstimmt, keine Eigenschaften zum Animieren vorhanden sind oder kein Animationsname vorhanden ist, wird die Animation nicht ausgeführt.
Wenn mehrere Animationen versuchen, dieselbe Eigenschaft zu ändern, wird die Animation ausgeführt, die am nächsten am Ende der Namensliste liegt.
Beim Animationsnamen wird die Groß-/Kleinschreibung beachtet und das Schlüsselwort „none“ ist nicht zulässig. Es wird empfohlen, einen Namen zu verwenden, der das Wesentliche der Animation widerspiegelt, und Sie können ein oder mehrere Wörter verwenden, die mit einem Bindestrich oder dem Unterstrichzeichen _ aufgeführt sind.
Die Immobilie wird nicht vererbt.
Syntax
Animationsname: keiner; Animationsname: test-01; Animationsname: -sliding; Animationsname: vertikal bewegen; Animationsname: test2; Animationsname: test3, move4; Animationsname: initial; Animationsname: erben;
3. Animationsdauer: Animationsdauer-EigenschaftDie Eigenschaft „animation-duration“ gibt die Dauer eines Animationszyklus an. Angabe in Sekunden s oder Millisekunden ms. Wenn für ein Element mehr als eine Animation angegeben ist, können Sie für jede eine andere Zeit festlegen, indem Sie die Werte durch Kommas getrennt auflisten.
Die Immobilie wird nicht vererbt.
Syntax
Animationsdauer: .5s; Animationsdauer: 200 ms; Animationsdauer: 2s, 10s; Animationsdauer: 15s, 30s, 200ms;
4. Timing-Funktion: Eigenschaft der Animation-Timing-FunktionDie Eigenschaft „animation-timing-function“ beschreibt, wie die Animation zwischen den einzelnen Keyframe-Paaren fortschreitet. Während der Animationsverzögerung werden keine Timing-Funktionen angewendet.
Die Immobilie wird nicht vererbt.
| Werte: | |
| linear | Lineare Funktion, die Animation erfolgt über die gesamte Zeit gleichmäßig, ohne Geschwindigkeitsschwankungen. |
| Leichtigkeit | Bei der Standardfunktion beginnt die Animation langsam, beschleunigt schnell und verlangsamt sich am Ende. Entspricht kubisch-bezier(0.25,0.1,0.25,1) . |
| leichtgängig | Die Animation beginnt langsam und wird am Ende sanft beschleunigt. Entspricht kubisch-bezier(0.42,0,1,1) . |
| Erleichterung | Die Animation beginnt schnell und verlangsamt sich am Ende sanft. Entspricht kubisch-bezier(0,0,0.58,1) . |
| Einfaches Ein- und Aussteigen | Die Animation beginnt langsam und endet langsam. Entspricht kubisch-bezier(0.42,0,0.58,1) . |
| Kubikbezier(x1, y1, x2, y2) | Ermöglicht das manuelle Festlegen von Werten von 0 bis 1. Sie können eine beliebige Flugbahn der Geschwindigkeit der Animationsänderung erstellen. |
| Stufenstart | Legt eine Schritt-für-Schritt-Animation fest, indem die Animation in Segmente unterteilt wird. Zu Beginn jedes Schritts werden Änderungen vorgenommen. Ausgewertet in „steps(1, start)“ . |
| Stufenende | Schritt-für-Schritt-Animation, Änderungen erfolgen am Ende jedes Schritts. In „steps(1, end)“ ausgewertet. |
| Schritte (Anzahl der Schritte, Schrittposition) | Eine Schrittzeitfunktion, die zwei Parameter akzeptiert. Der erste Parameter gibt die Anzahl der Intervalle in der Funktion an. Dies muss eine positive Ganzzahl größer als 0 sein, es sei denn, das zweite Argument ist „jump-none“. In diesem Fall muss es eine positive Ganzzahl größer als 1 sein. Der zweite Parameter, der optional ist, gibt die Schrittposition an – den Punkt, an dem die Animation beginnt, indem er einen der folgenden Werte verwendet:
Beim Wert start startet die Animation am Anfang jedes Schritts, beim Wert end am Ende jedes Schritts mit Verzögerung. Die Latenz wird berechnet, indem die Animationszeit durch die Anzahl der Schritte geteilt wird. Wenn der zweite Parameter nicht angegeben ist, wird der Standardwert end verwendet. |
| anfänglich | |
| erben |
Syntax
Animation-Timing-Funktion: Leichtigkeit; Animation-Timing-Funktion: Easy-In; Animation-Timing-Funktion: Ease-Out; Animation-Timing-Funktion: Easy-in-out; Animation-Timing-Funktion: linear; Animations-Timing-Funktion: Schrittstart; Animation-Timing-Funktion: Schrittende; Animations-Timing-Funktion: kubischer Bezier (0,1, 0,7, 1,0, 0,1); Animation-Timing-Funktion: Schritte (4, Ende); Animation-Timing-Funktion: Leichtigkeit, Schrittstart, Kubikbezier (0,1, 0,7, 1,0, 0,1); Animation-Timing-Funktion: initial; Animation-Timing-Funktion: erben;
Durch Schritt-für-Schritt-Animationen lassen sich interessante Effekte erzeugen, etwa das Drucken von Text oder eine Ladeanzeige.
5. Animationswiederholung: Eigenschaft „animation-iteration-count“.Die Eigenschaft „animation-iteration-count“ gibt an, wie oft die Animationsschleife abgespielt wird. Ein Startwert von 1 bedeutet, dass die Animation einmal von Anfang bis Ende abgespielt wird. Diese Eigenschaft wird häufig in Verbindung mit dem alternativen Wert der Eigenschaft „animation-direction“ verwendet, wodurch die Animation in abwechselnden Schleifen in umgekehrter Reihenfolge abgespielt wird.
Die Immobilie wird nicht vererbt.
Syntax
Anzahl der Animationsiterationen: unendlich; Anzahl der Animationsiterationen: 3; Anzahl der Animationsiterationen: 2,5; Animationiterationsanzahl: 2, 0, unendlich;
6. Animationsrichtung: AnimationsrichtungseigenschaftDie Eigenschaft „animation-direction“ bestimmt, ob die Animation in einigen oder allen Schleifen in umgekehrter Reihenfolge abgespielt werden soll. Wenn die Animation in umgekehrter Reihenfolge abgespielt wird, sind auch die Timing-Funktionen umgekehrt. Wenn die Funktion „Ease-in“ beispielsweise in umgekehrter Reihenfolge abgespielt wird, verhält sie sich wie die Funktion „Ease-out“.
Die Immobilie wird nicht vererbt.
| Werte: | |
| normal | Alle Animationswiederholungen werden wie angegeben abgespielt. Standardwert. |
| umkehren | Alle Animationswiederholungen werden in der entgegengesetzten Richtung abgespielt, wie sie definiert wurden. |
| wechseln | Jede ungerade Wiederholung der Animationsschleife wird in der normalen Richtung abgespielt, jede gerade Wiederholung in der umgekehrten Richtung. |
| abwechselnd-umgekehrt | Jede ungerade Wiederholung der Animationsschleife wird in umgekehrter Richtung abgespielt, jede gerade Wiederholung in normaler Richtung. |
| anfänglich | Setzt den Eigenschaftswert auf den Standardwert. |
| erben | Erbt den Eigenschaftswert vom übergeordneten Element. |
Um festzustellen, ob die Wiederholung einer Animationsschleife gerade oder ungerade ist, beginnt die Anzahl der Wiederholungen bei 1.
Syntax
Animationsrichtung: normal; Animationsrichtung: umgekehrt; Animationsrichtung: alternativ; Animationsrichtung: abwechselnd-umgekehrt; Animationsrichtung: normal, umgekehrt; Animationsrichtung: alternativ, umgekehrt, normal; Animationsrichtung: initial; Animationsrichtung: erben;
7. Animation abspielen: Eigenschaft „animation-play-state“.Die Eigenschaft „animation-play-state“ bestimmt, ob die Animation startet oder pausiert. Das Stoppen der Animation innerhalb einer Schleife ist durch die Verwendung dieser Eigenschaft in einem JavaScript-Skript möglich. Sie können die Animation auch stoppen, wenn Sie mit der Maus über ein Objekt fahren – state:hover .
Die Immobilie wird nicht vererbt.
Syntax
Animation-Play-State: läuft; Animationswiedergabestatus: angehalten; Animationswiedergabestatus: angehalten, läuft, läuft; Animations-Wiedergabezustand: initial; Animation-Play-State: erben;
8. Animationsverzögerung: AnimationsverzögerungseigenschaftDie Eigenschaft „animation-delay“ bestimmt, wann die Animation startet. Angabe in Sekunden s oder Millisekunden ms.
Die Immobilie wird nicht vererbt.
Syntax
Animationsverzögerung: 5s; Animationsverzögerung: 3s, 10ms;
9. Zustand des Elements vor und nach dem Abspielen der Animation: Eigenschaft „animation-fill-mode“.Die Eigenschaft „animation-fill-mode“ bestimmt, welche Werte von der Animation außerhalb ihrer Ausführungszeit angewendet werden. Wenn die Animation abgeschlossen ist, kehrt das Element zu seinen ursprünglichen Stilen zurück. Standardmäßig wirkt sich die Animation nicht auf die Eigenschaftswerte aus, wenn die Animation auf ein Element angewendet wird – Animationsname und Animationsverzögerung. Darüber hinaus haben Animationen standardmäßig keinen Einfluss auf die Werte der Eigenschaften „animation-duration“ und „animation-iteration-count“, nachdem sie abgeschlossen sind. Die Eigenschaft „animation-fill-mode“ kann dieses Verhalten überschreiben.
Die Immobilie wird nicht vererbt.
| Werte: | |
| keiner | Standardwert. Der Zustand des Elements ändert sich weder vor noch nach der Wiedergabe der Animation. |
| vorwärts | Sobald die Animation endet (wie durch den Wert „animation-iteration-count“ bestimmt), wendet die Animation die Eigenschaftswerte zum Zeitpunkt des Endes der Animation an. Wenn die Anzahl der Animationiterationen größer als Null ist, werden die Werte für das Ende der letzten abgeschlossenen Iteration der Animation angewendet (nicht der Wert für den Beginn der nächsten Iteration). Wenn die Anzahl der Animationiterationen Null ist, werden die Werte angewendet, die die erste Iteration starten (wie im Animationsfüllmodus: rückwärts;). |
| rückwärts | Während des mit „animation-delay“ definierten Zeitraums wendet die Animation die im Keyframe definierten Eigenschaftswerte an, wodurch die erste Iteration der Animation beginnt. Dies sind entweder die From-Keyframe-Werte (bei Animationsrichtung: normal oder Animationsrichtung: Alternate) oder die To-Keyframe-Werte (bei Animationsrichtung: Reverse oder Animationsrichtung: Alternate). |
| beide | Ermöglicht Ihnen, ein Element im ersten Keyframe zu belassen, bevor die Animation beginnt (ohne Berücksichtigung eines positiven Verzögerungswerts) und beim letzten Frame bis zum Ende der letzten Animation zu verzögern. |
Syntax
Animationsfüllmodus: keiner; Animationsfüllmodus: vorwärts; Animationsfüllmodus: rückwärts; Animationsfüllmodus: beide; Animationsfüllmodus: keiner, rückwärts; Animationsfüllmodus: beide, vorwärts, keine;
10. Kurze Beschreibung der Animation: AnimationseigenschaftAlle Parameter für die Animationswiedergabe können in einer Eigenschaft zusammengefasst werden – Animation – und durch ein Leerzeichen getrennt aufgelistet werden:
Animation: Animationsname Animationsdauer Animations-Timing-Funktion Animationsverzögerung Animationsiterationsanzahl Animationsrichtung;
Um die Animation abzuspielen, reicht es aus, nur zwei Eigenschaften anzugeben – Animationsname und Animationsdauer. Die übrigen Eigenschaften übernehmen ihre Standardwerte. Die Reihenfolge, in der die Eigenschaften aufgelistet sind, spielt keine Rolle, das Einzige ist, dass die Ausführungszeit von „animation-duration“ vor der Verzögerung von „animation-delay“ liegen muss.
11. Mehrere AnimationenFür ein Element können Sie mehrere Animationen festlegen und deren Namen durch Kommas getrennt auflisten:
Div (Animation: Schatten 1 Sek. Easy-In-Out 0,5 Sek. abwechselnd, Bewegung 5 Sek. linear 2 Sek.;)
In diesem Artikel werden wir uns weiterhin mit den Nuancen der Verwendung von Animationen befassen, wir werden CSS-Funktionen wie das Anhalten der Animation und die Animationsrichtung untersuchen und uns ansehen, wie man einen Stil für ein Element angibt, wenn die Animation nicht abgespielt wird Wie man eine universelle Eigenschaft richtig zum Erstellen von Animationen verwendet, werden wir eine Verbindung herstellen und lernen, wie man die Bibliothek verwendet Animate.css .
Ich mache Sie darauf aufmerksam, dass Sie zum Studium dieses Materials die Kenntnisse benötigen, die Sie im vorherigen Artikel „“ erwerben müssen.
AnimationszustandDie nächste einfache Eigenschaft, die wir uns ansehen werden, ist Animations-Wiedergabezustand, es definiert den Status der Animation. Dieser Eigenschaft wird eines von zwei möglichen Schlüsselwörtern übergeben:
- läuft – Animation wird abgespielt (Standardwert).
- pausiert – Animation ist pausiert.
In diesem Beispiel haben wir eine einfache Animation mithilfe von CSS-Eigenschaften erstellt links Wir verschieben das Element mit relativer Positionierung relativ zum linken Rand der aktuellen Position.
Wenn Sie mit dem Mauszeiger über ein Element fahren (Pseudoklasse :schweben()) wird die Animation angehalten, indem die Eigenschaft „paused“ festgelegt wird Animations-Wiedergabezustand, wird die Animation fortgesetzt, wenn der Cursor das Element verlässt.
Das Ergebnis unseres Beispiels:
AnimationsrichtungVerwendung der universellen Eigenschaft Animation Wir haben die folgenden Animationsparameter angegeben:
- Animationsname- ich mag es mich zu bewegen.
- Animationsdauer- 4 Sekunden.
- Geschwindigkeitskurve- Schrittanimation Schritte(3,Start) . Für jeden Teil des Keyframes wird dieser erstellt 3 Schritte.
- Animationsverzögerung- 500 Millisekunden.
- Die Anzahl der Zyklen- unendlich (unendlich).
- Animationsrichtung- rückwärts (in die entgegengesetzte Richtung).
Das Ergebnis unseres Beispiels:
Betrachten Sie das folgende Beispiel, in dem
Laden der Animation auf den CSS-Körper ( margin : 0 ; /* padding */ padding : 0 ; /* padding */ ) .container ( width : 100px ; /* element width */ padding-top : 100px ; /* padding top */ margin : 0 auto ; /* Element mit äußeren Rändern zentrieren */ ) div > div ( display : inline-block ; /* verschachtelte Elemente als Blockzeile (liniert) festlegen */ width : 10px ; /* width element */ height : 10px ; /* Elementhöhe */ margin : 0 auto ; /* Elemente mit äußeren Rändern zentrieren */ border-radius : 50px ; /* Form der Ecken bestimmen */ ) .item:nth-child(1) ( Hintergrund : Orange ; /* Hintergrundfarbe */ Animation : Aufwärts 1s linear 1s unendlich ; ) .item:nth-child(2) ( Hintergrund : Violett ; /* Hintergrundfarbe */ Animation : Aufwärts 1s linear 1,2s unendlich ; / * Name Dauer Timing-Funktion Verzögerung Iterationsanzahl */ ) .item:nth-child(3) ( Hintergrund : Magenta ; /* Hintergrundfarbe */ Animation : aufwärts 1s linear 1,4s unendlich ; /* Name Dauer Timing-Funktion Verzögerung Iterationszahl */ ) .item:nth-child(4) ( Hintergrund : Lightseagreen ; /* Hintergrundfarbe */ Animation : Aufwärts 1s linear 1,6s Unendlich ; /* Name Dauer Timing-Funktion Iterationsanzahl verzögern */ ) .item:nth-child(5) ( Hintergrund : waldgrün ; /* Hintergrundfarbe */ Animation : 1s linear 1,8s unendlich ; /* Name Dauer Timing-Funktion Iterationsanzahl Verzögerung * / ) @keyframes up ( 0 %, 100 % ( /* Beginn und Ende der Animationsschleife */ transform : translatorY(-15px); /* das Element entlang der Y-Achse verschieben */ ) 50 % ( /* Mitte der Animation */ transform: translator(5px, 0); /* Verschiebe das Element um 5 Pixel entlang der X-Achse, keine Verschiebung entlang der Y-Achse */ ) )In diesem Beispiel haben wir mehrere Animationen erstellt, in denen verschachtelte Elemente mithilfe einer Eigenschaft verschoben werden entlang der Achse X(horizontale Achse) und Y-Achse (vertikale Achse). Für jedes Element Es wurden verschiedene Animationsverzögerungen eingestellt, die von 1 Sekunde bis 1,8 Sekunden reichen. Jede Elementanimation enthält die folgenden Parameter:
- Animationsname-hoch.
- Animationsdauer- 1 Sekunde .
- Geschwindigkeitskurve- linear (gleiche Geschwindigkeit während der gesamten Animation).
- Animationsverzögerung- von 1 Sekunde bis 1,8 Sekunden.
- Die Anzahl der Zyklen- unendlich (unendlich).
Schauen wir uns eine einfache Animation aus der Bibliothek an, die die Transparenz eines Elements ändert:
@keyframes fadeIn ( von ( /* Beginn des Animationszyklus (identisch mit 0 %) */ Deckkraft: 0 ; /* Element ist vollständig transparent */ ) bis ( /* Ende des Animationszyklus (identisch mit 100 %) * / opacity : 1 ; /* Element ist undurchsichtig */ ) .fadeIn ( Animationsname : fadeIn ; /* Animationsname (entspricht dem Namen in der @keyframes-Regel) */ )Diese Keyframes verwenden eine Eigenschaft, um die Deckkraft eines Elements von vollständig transparent in undurchsichtig zu ändern.
Dies reicht jedoch noch nicht aus, um die Animation der Animate.css-Bibliothek zu starten, die Sie interessiert. Um die Animation zu starten, können Sie, müssen aber nicht, die folgenden vom Autor des Projekts erstellten Klassen verwenden:
/* Basisklasse, mit der Sie eine Animation für einen Zyklus ausführen können */ .animated ( Animationsdauer: 1 Sekunde; /* Animationsdauer 1 Sekunde */ Animationsfüllmodus: Beide; /* Legt den Stil für das Element fest, wenn Die Animation wird nicht abgespielt (sobald die Animation abgeschlossen ist und bevor sie beginnt – während der Verzögerung).*/ ) /* Durch Hinzufügen der Klasse .infinite zu einem Element, das über die Klasse .animated verfügt, kann die Animation auf unbestimmte Zeit abgespielt werden */ .animated.infinite (Animationsiterationsanzahl: unendlich; /* Animation wird endlos abgespielt */)Bitte beachten Sie, dass Sie eigene Klassen erstellen können, die den Animationsprozess steuern. Das Hinzufügen von Klassen zu diesem oder jenem Element erfolgt in der Regel über die Sprache JavaScript abhängig von Benutzeraktionen oder bestimmten Ereignissen. Wir werden uns ein Beispiel ansehen, in dem wir nur Klassen aus der Animate.css-Bibliothek verwenden und Animationen nur mithilfe von Cascading Style Sheets installieren.
Schauen wir uns ein Beispiel an:
Animation mit der Animate.CSS-BibliothekIn diesem Beispiel haben wir die Verbindung über das Tag hergestellt die Animate.css-Bibliothek und platzierte ein Bild, mit dem die folgenden 3 Klassen aus der Bibliothek verbunden wurden (angegeben mit einem Leerzeichen).
Auf vielen Landingpages oder Promoseiten finden sich zunehmend verschiedene Animationseffekte. Schließlich machen sie die Seite interessanter und attraktiver.
Grundsätzlich werden diese Effekte entweder bei einem bestimmten Ereignis (Klicken oder Bewegen des Mauszeigers auf ein Element) oder beim Scrollen der Seite festgelegt. Ich denke, Sie sind auf solche Websites gestoßen. Beim Scrollen der Seite erscheinen verschiedene Elemente reibungslos und schön.
Bisher musste man zum Implementieren dieser Effekte nur JS verwenden, aber die Entwicklung steht nicht still und mit der Veröffentlichung von CSS3 können alle diese Effekte darauf implementiert werden.
In dieser Lektion stellen wir Ihnen ein sehr interessantes Tool namens animate.css vor. Dabei handelt es sich um ein vorgefertigtes CSS-Stylesheet, das über 50 verschiedene Effekte im Arsenal hat und alle diese Effekte in CSS3 implementiert sind.
Um es zu verwenden, müssen Sie lediglich eine bestimmte Klasse für das gewünschte Element festlegen und ein Animationseffekt wird auf dieses Element angewendet. Wie ich bereits sagte, ist diese Animation in CSS3 implementiert, sodass diese Effekte in allen modernen Browsern funktionieren.
Schauen wir uns nun animate.css genauer an.
Grundlegendes HTML-MarkupSehen Sie sich das Video-Tutorial an
- prallen
- Blitz
- Impuls
- Gummiband
- Shake
- schwingen
- flattern
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- einblenden
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- ausblenden
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotierenIn
- rotateInDownLeft
- rotateInDownRight
- rotationInUpLeft
- rotationInUpRight
- rotierenOut
- rotateOutDownLeft
- rotateOutDownRight
- rotierenOutUpLeft
- rotateOutUpRight
- Scharnier
- rollIn
- ausrollen
- hineinzoomen
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- Rauszoomen
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
Wenn Sie alles wie oben beschrieben gemacht haben, wird dieser Effekt beim Laden der Seite auf das Element angewendet und die Animation endet dort.
Aber was ist, wenn die Animation ohne Unterbrechung fortgesetzt werden soll?
Fügen Sie dazu einfach eine weitere Klasse für unser animiertes Element hinzu. Diese Klasse ist unendlich.
Überschrift
Legen Sie die Animation fest, wenn Sie mit der Maus über ein Element fahren
Sehen Sie sich das Video-Tutorial an
Alle zuvor beschriebenen Beispiele setzen die Animation sofort nach dem Laden der Seite, in der Praxis ist dies jedoch selten notwendig. In der Praxis ist es sehr oft notwendig, eine Animation festzulegen, wenn man mit der Maus über ein Element fährt. Deshalb habe ich im Folgenden den vorgefertigten Code für diese Implementierung bereitgestellt.
HTMLUnser HTML-Markup hat sich ein wenig geändert, jetzt müssen wir keine Klasse angeben, die für eine bestimmte Animation verantwortlich ist. Wir müssen diesen Wert im speziellen Dateneffektattribut angeben. Bitte beachten Sie dies, es ist sehr wichtig.
Überschrift
Hier ist ein kleiner jQuery-Code, der das Mouseover-Ereignis überwacht. Wenn dieses Ereignis eintritt, fügt das Skript eine Klasse hinzu, deren Wert im Attribut data-effect angegeben wird. Durch das Hinzufügen dieser Klasse wird eine Animation angewendet.
Funktion animate(elem)( var effect = elem.data("effect"); if(!effect || elem.hasClass(effect)) return false; elem.addClass(effect); setTimeout(function())( elem. removeClass (effect); ), 1000); ) $(".animated").mouseenter(function() ( animate($(this)); ));
Natürlich können Sie dieses Skript beliebig ändern, beispielsweise können Sie das MouseEnter-Ereignis so ändern, dass es darauf klickt. In diesem Fall erfolgt die Animation dann nicht in dem Moment, in dem sich die Maus über dem Element befindet, sondern in dem Moment, in dem es darauf klickt.
Animation beim Scrollen der Seite erstellenSehen Sie sich das Video-Tutorial an
Schauen wir uns zum Schluss noch ein weiteres Beispiel an, in dem Sie animate.css ganz einfach verwenden können.
Sie können nämlich beim Scrollen der Seite unterschiedliche Effekte für Elemente festlegen. Für diese Zwecke benötigen wir neben animate.css auch ein spezielles wow.js-Skript.