Animierte CSS-Beispiele. Neun einfache CSS3-Animationsbeispiele
Lesen Sie auch
Heute lernen wir, wie man mithilfe von zwei Skripten Website-Objekte einfach und schnell animiert. Den Namen finden Sie oben im Titel dieses Artikels. Aber lassen Sie mich zunächst erklären, wofür jeder von ihnen gedacht ist.
WOW.js ist eine kleine Bibliothek, die es Ihnen ermöglicht, Animationen in einer bestimmten Phase des Seitenscrollens zu aktivieren. Es wiegt sehr wenig und ist zudem völlig unabhängig – das heißt, es ist nicht nötig, jQuery oder andere Monster anzuschließen.
Animate.CSS ist ein Skript, das direkt für die Animation selbst verantwortlich ist. Tatsächlich übernimmt wow.js Animationen aus genau diesem Ding. Und davon gibt es mehrere Dutzend.
Der Nachteil von animate.css besteht darin, dass es sich lediglich um einen regulären Satz von CSS-Regeln für Animationen handelt. Das heißt, sie werden sofort nach dem Laden der Seite abgespielt. Und wenn die animierten Elemente auf dem „ersten“ Bildschirm nicht sichtbar sind, werden die Besucher diese ganze Schönheit einfach nicht sehen. Schließlich wird es abgespielt, bevor die Seite an die richtige Stelle zurückgespult wird.
Und um dies zu verhindern, habe ich Ihnen im ersten Hinweis (Link im nächsten Absatz) gezeigt, wie und wo Sie JS-Codes schreiben, damit die Animation in einem bestimmten Stadium des Seitenscrollens abgespielt wird. Es war äußerst umständlich, aber es funktionierte wie ein Zauber
Bevor Sie beginnen, empfehle ich Ihnen daher, sich die Lektion „“ anzusehen. Da ich bereits davon ausgehe, dass Sie wissen, wie man Animationen auf der Website verwendet. Gleichzeitig werden Sie sofort verstehen, wie wow.js erleichtert Ihnen die Arbeit. Schließlich müssen wir jetzt nicht mehr js-Code schreiben und uns damit befassen. Einstecken und vergessen
Damit ist die Einführung beendet. Kommen wir nun näher zum „Körper“. Ich habe eine Videolektion zu diesem Thema aufgezeichnet, aber bevor ich sie anschaue, möchte ich Ihnen zeigen, was Sie erhalten, wenn Sie die Lektion in der Praxis bis zum Ende durcharbeiten. Sozusagen für mehr Motivation
Na, hast du schon nachgeschaut? Darüber „machen“ Sie sich mit Ihren eigenen Händen lustig. Also rennen Sie jetzt los, um das Video anzusehen.
Lektion: WOW.js und Animate.CSS – mehr Spaß zusammen!Tue es!
Einrichten von WOW.js. So laden Sie es herunter und verbinden es.1 Schritt. Laden Sie die Skripte wow.js und animate.css von den offiziellen Websites herunter (siehe Links oben unter dem Video) und legen Sie sie in Ihrem Projektordner ab.
Schritt 2. Wir verbinden die Skripte mit einfachem HTML-Code auf der Seite im Tag:
Hinweis vom Abonnenten des Master-CSS-Kanals:
Das Skript-Tag sollte immer am Ende des Textkörpers hinzugefügt werden. Dies geschieht, um das Laden der Seite zu beschleunigen. Jedes Mal, wenn der Browser ein Skript-Tag erreicht, wird das Laden und Rendern der gesamten Website eingefroren, bis das Skript geladen ist. Aus diesem Grund sehen wir oft Websites, die lange Zeit nur ein leeres Blatt waren. Und wenn das Skript am Ende des Hauptteils platziert wird, haben Sie außerdem die Garantie, dass der Hauptteil fertig ist und das Skript definitiv funktioniert.Vielen Dank an Roman Belyaev für die detaillierten Erläuterungen zum Verbinden von Skripten auf der Website.
Schritt 3. Sie müssen das Skript initialisieren, indem Sie unmittelbar nach dem Verbinden den folgenden Code hinzufügen:
neues WOW().init();
An diesem Punkt endet die Verbindung und es ist Zeit für die zweite Stufe.
Verwendung von WOW.jsSchritt 1. Wählen Sie das Element aus, das wir animieren möchten, und fügen Sie class="wow" hinzu. Im folgenden Code habe ich dies anhand eines Beispielbildes gezeigt:
Schritt 2. Wählen Sie die Animation aus und fügen Sie sie mit einer zusätzlichen Klasse zu unserem Hund hinzu:
Schritt 3. Fügen Sie bei Bedarf Einstellungen für die Animation hinzu, indem Sie spezielle Datenattribute verwenden:
Im obigen Code habe ich angegeben, dass die Animation ausgelöst werden soll, wenn das Bild 200 Pixel vom unteren Bildschirmrand entfernt ist. Gleichzeitig kommt es jedoch zu einer Verzögerung von einer halben Sekunde und die Animation selbst dauert genau 2 Sekunden.
WOW.js-Animationseinstellungen über Attribute data-wow-duration – Geben Sie die Wiedergabezeit der Animation an. data-wow-delay – Legen Sie eine Verzögerung fest, bevor die Animation abgespielt wird. data-wow-offset – Aktivieren Sie die Animation, wenn das Element eine bestimmte Anzahl von Pixeln überschreitet Daten-Wow-Iteration am unteren Bildschirmrand – Anzahl der AnimationswiederholungenBitte beachten Sie, dass diese Attribute nicht erforderlich sind. Wenn Sie sie nicht angeben, wird die Animation einfach standardmäßig abgespielt, sobald das Element auf dem Bildschirm erscheint, während Sie im Browserfenster scrollen.
Na Leute. Das ist wahrscheinlich alles. Wenn Sie Fragen haben, stellen Sie diese in den Kommentaren;)
Hallo. Ich möchte Sie daran erinnern, worüber ich bereits geschrieben habe, aber das waren nur Grundprinzipien. Jetzt schlage ich vor, dass Sie sich mit einem vorgefertigten Satz an Animationseigenschaften in einer animate.css-Datei vertraut machen. Dabei handelt es sich nicht um einen Generator, sondern um eine Bibliothek, die in allen gängigen Browsern einwandfrei funktioniert. Und Sie können sich diese Beispiele ansehen.
Animate.css verbindenWenn Sie eine CSS-Animation eines Bildes, Textes oder einer Schaltfläche für eine Website erstellen und dies alles ohne die Verwendung von Javascript umsetzen möchten, müssen Sie lediglich eine Datei, die oben bereits erwähnt wurde, auf standardmäßige Weise anbinden, d. h. zwischen den Head-Tags.
Auf diese Weise werden die Animationseigenschaften von Objekten festgelegt. , animiert ist erforderlich und tada ist einer der Effekte. Aber wir brauchen den Zyklus selbst und jetzt werden wir es tun. Dies kann erreicht werden, indem eine neue Klasse erstellt und dieser oder einer vorhandenen Klasse spezielle Eigenschaften zugewiesen werden.
Schleifenanimation Animate.css| .new (animation-iteration-count: unendlich;) |
Neu(animation-iteration-count: unendlich;)
Und um Ihnen noch klarer zu machen, was ich hier erklären wollte, schauen Sie sich dieses Video an, in dem ich anhand eines realen Beispiels anschaulich demonstriere, wie es funktioniert, und laden Sie auch die Stile selbst herunter.
In den letzten Jahren hat CSS viele interessante Funktionen eingeführt, die die Webentwicklung unterhaltsamer machen. Eines dieser Dinge ist CSS3-Animation. Vor CSS3 konnten Animationen nur mit Javascript umgesetzt werden.
Heute zeigen wir Ihnen, wie Sie mit einer CSS3-Bibliothek arbeiten, die das Erstellen von Animationen zu einem angenehmen und einfachen Prozess macht: Animate.css.
Animate.css ist eine Bibliothek zum Erstellen von Animationen mit CSS3. Diese Bibliothek unterstützt mehr als 50 verschiedene Animationseffekte, die fast alle in verschiedenen Browsern funktionieren und von CSS3 unterstützt werden.
Diese Effekte können auf Text, Bilder, Formen usw. angewendet werden.
Lasst uns beginnenUm Animate.css zu aktivieren, verbinden Sie die erforderlichen Klassen mit dem Seitenelement. Fügen Sie zunächst die Datei animate.css in den Head-Abschnitt ein. Sie können die Bibliothek aus dem Repository auf Github herunterladen.
Standardmäßig spielt Animate.css die Animation einmal ab, wenn die Seite geladen wird. Um die Animation zyklisch abzuspielen, fügen wir ein wenig Javascript hinzu.
... ...
HTMLZuerst müssen wir die .animated-Klasse dem gewünschten Element zuweisen, gefolgt von der Animationstypklasse.
Dieser Text wird animiert.
Das ist alles! Jetzt wird die Animation abgespielt, wenn die Seite geladen wird. Fügen wir Javascript hinzu, um die Animation abzuspielen, wenn ein Ereignis ausgelöst wird. Die Klasse.option ist völlig willkürlich, Sie können sie nach Ihren Wünschen ändern.
Zusätzliche CSS-EinstellungenWenn wir möchten, dass die Animation nicht stoppt oder ihre Ausführungszeit unterschiedlich ist, müssen wir einige Werte anpassen.
Um die Animation ein n-tel oder unendlich oft zu scrollen, können wir das Attribut „animation-iteration-count“ anpassen. Vergessen Sie nicht, das Browser-Präfix für Webkit, Moz usw. anzugeben. Für unendliches Scrollen legen Sie den Wert auf „infinite“ fest.
Wenn wir die Animation eine bestimmte Anzahl von Malen abspielen müssen, können Sie dem so folgen.
Vendor-animation-iteration-count: unendlich | ;
Um die Wiedergabezeit zu ändern, können Sie die Eigenschaften „animation-duration“ und „animation-delay“ anpassen. Beispiel:
Option ( -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; )
JavascriptZur Animation während eines Ereignisses (zum Beispiel beim Anklicken) verwenden wir Javascript. Fügen wir zunächst einen Link hinzu.
Dieser Text wird animiert. Zum Animieren klicken!
Mit Javascript können wir eine Animationsfunktion erstellen, an die wir den Namen der Animationsklasse übergeben:
$(function() ( $("#ref").click(function() ( animate(".demo", "bounce"); return false; )); )); function animate(element_ID, animation) ( $(element_ID).addClass(animation); var wait = window.setTimeout(function())( $(element_ID).removeClass(animation)), 1300); )
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; )
Diese Sammlung enthält die besten und hochwertigsten CSS-Funktionen. Hier finden Sie verschiedene und erstaunliche Demobeispiele und -techniken berühmter Layouter und Designer, die versuchen zu beweisen, dass es mittlerweile möglich ist, fast alles nur mit reinem CSS zu machen. Hier finden Sie auch mehrere Lektionen, die Ihnen im Detail erklären, wie Sie eine solche Kreation herstellen. Ich hoffe, dass diese Sammlung für Sie nützlich sein wird.
CSS 3D-WolkenIn dieser Demo können Sie ausgefallene Wolken in 3D erstellen und bearbeiten. Diese CSS-Clouds machen uns deutlich, dass die Möglichkeiten von Web-Technologien nahezu grenzenlos sind.
Dies sind Beispiele für Logos, die nur mit reinem CSS erstellt wurden. Denken Sie nur darüber nach, bei der Erstellung wurden keine Bilder verwendet. Es ist einfach etwas.
Tolles und künstlerisches Beispiel für die Verwendung von CSS im Alphabet
Eine einfache, aber sehr elegante Navigationsleiste für die Website, natürlich nur mit CSS3 erstellt. Keine Bilder oder Skripte.
Eines der vielen Doodles der Google-Suchmaschine, erstellt in CSS. Dies ist ein großartiges Beispiel für den guten Einsatz von CSS-Animationen.
Ein gut gemachter und hochwertiger Bild-Slider. Plus 4 Beispiele in der Demo.
Ein wunderschöner animierter und mehrfarbiger Ring mit wenig CSS-Code
Meiner Meinung nach ist dieser Filter sehr notwendig, insbesondere da er mit reinem CSS erstellt wurde. Mithilfe von Unschärfe können Sie die Aufmerksamkeit des Benutzers auf einen bestimmten Punkt lenken.
In diesem Artikel geht es um responsive Flexbox-Blöcke. Es geht ausschließlich um diese Blöcke, obwohl der Artikel auf Englisch ist.
Ein schönes Dropdown-Menü für eine Website mit Symbolen. Ein großes Plus ist, dass es vollständig in CSS erstellt wurde.
Hochwertiges Material in englischer Sprache, in dem es um die Verwendung von CSS-Filtern für Bilder geht.
Ein Beitrag über CSS-Formulare mit zahlreichen Beispielen
Eine Lektion zum Erstellen stilvoller Fortschrittsbalken mit reinem CSS und Animation. Sie können sich auch das Beispiel ansehen und die Quellen herunterladen.
Das derzeit beliebteste CSS-Animationsprojekt im Internet. Und wahrscheinlich die einfachste und hochwertigste und außerdem kostenlos.