Animate.css - CSS3-Bibliothek zum einfachen Erstellen von Animationen

CSS hat sich mit vielen Features verbessert, die die Webentwicklung interessanter und anspruchsvoller machen. Eines dieser Features sind CSS3-Animationseffekte . Bevor Sie CSS3 erstellen, können Sie nur mit Javascript arbeiten. Aber jetzt können Sie es einfach mit CSS3 erstellen.

Wir haben Sie mit einem guten Tutorial zum Erstellen von Bounce Effect mit CSS3 vertraut gemacht und in diesem Beitrag werde ich Ihnen eine großartige Bibliothek vorstellen, die die Erstellung von Animationen mit CSS3 noch einfacher macht: Animate.css .

Animate.css ist eine gebrauchsfertige Bibliothekssammlung von CSS3-Animationseffekten . Diese Bibliothek liefert Ihnen über 50 verschiedene Animationseffekte, die bei den meisten Browsern mit CSS3-Unterstützung konsistent arbeiten.

Sie können dann die Animation auf Ihren Text, Bild, Formular und so weiter anwenden. Es gibt auch viele großartige Seiten, die diese Bibliothek benutzen; Tridiv - der beste CSS 3D-Editor im Web - ist einer davon.

Anfangen

Mit Animate.css müssen Sie nur die entsprechenden Klassen in Ihre Elemente einfügen. Fügen Sie zunächst die Datei animate.css in den Kopf ein . Sie können die vollständige Bibliothek von der Github-Repository-Seite herunterladen.

Animate.css animiert standardmäßig nur einmal beim ersten Laden der Seite . Es bleibt dann statisch. Um die Animation steuern zu können, benötigen wir ein wenig Javascript. In diesem Fall werden wir eine jQuery in das Projekt aufnehmen.

 ...  ... 

HTML-Markup

Um die Animation anzuwenden, müssen Sie dem Element, das Sie animieren möchten, eine .animated Klasse hinzufügen, zusammen mit dem Animationsnamen.

 Dieser Text wird animiert. 

Das ist es! Die Animation wird nur beim Laden der Seite implementiert. Daher müssen Sie möglicherweise auch Javascript verwenden, um die Animation bei einem Ereignisauslöser anzuwenden. Die .option kann auch an Ihre Bedürfnisse angepasst werden.

Zusätzliche CSS-Optionen

Die zuvor definierte Animation wird nur einmal und nach einer vordefinierten Dauer und Verzögerungszeit durchlaufen. Wenn Sie mehr Schleifen oder eine andere Dauer oder Verzögerungszeit benötigen, können Sie dies wie folgt anpassen.

Um die Animation mehrfach oder sogar unendlich durchlaufen zu lassen, können Sie das Attribut animation-iteration-count . Stellen Sie sicher, dass auch die entsprechenden Herstellerpräfixe wie webkit, moz usw. enthalten sind. Um es unendlich zu machen, fügen Sie infinite als Wert hinzu.

Wenn Sie die Schleife nur mehrmals durchlaufen müssen, geben Sie einfach den Wert mit der gewünschten Anzahl von Schleifen ein.

 -vendor-animation-iteration-count: unendlich |  ; 

Um die Dauer anzupassen, ist das zu verwendende Attribut animation-duration ; und es ist animation-delay für die Verzögerungssteuerung. Der folgende Code ist ein Beispieloptionscode.

 .option {-webkit-animation-duration: 3s; -Webkit-Animation-Verzögerung: 2s; -webkit-animation-iteration-count: 5; } 

Javascript-Steuerung

Für mehr Kontrolle über den Animationszustand benötigen wir ein wenig Hilfe von Javascript. Nehmen wir an, wir möchten, dass ein Textlink bei einem Klick eine Animation auslöst. Erstens müssen wir einen Verweis in den Link hinzufügen, so.

Dieser Text wird animiert.

Wenn Sie die click möchten, fügen Sie die Link-Referenz in die click Funktion ein.

Mit Javascript können Sie den Animationsnamen definieren. Wir verwenden einen Ansatz, indem wir eine Animationsfunktion erstellen und die Animation zusammen mit der Elementklasse benennen (im obigen Code haben wir das demo Attribut hinzugefügt).

Und der Javascript-Code wird wie folgt aussehen.

Animationseffekt ist in der Tat eine der besten Möglichkeiten, um Ihre Website attraktiver zu machen, aber denken Sie daran, es nicht zu übertreiben.

Hinzufügen von Emoji-Unterstützung zu Ihrer Website mit Emoji CSS

Emojis haben digitale Gespräche übernommen und diese süßen kleinen Ikonen haben die Internetkultur schnell durchdrungen. Sie sind jetzt ein alltäglicher Teil unseres Lebens und Sie können sie überall finden, von Desktop-Apps bis WordPress.Und wenn Sie jemals benutzerdefinierte Emojis auf Ihrer Website haben wollten, dann ist Emoji CSS die perfekte Bibliothek.Diese

(Tech- und Design-Tipps)

Fügen Sie React.js Explorer mit React Developer Tools zu Chrome hinzu

Jeder Webentwickler sollte bereits von den fantastischen Chrome-Entwicklertools wissen. Diese Funktion ist direkt in Chrome integriert und ermöglicht es Entwicklern , Seiten zu prüfen und Elemente direkt im Browser zu bearbeiten oder zu entfernen .Es ist unglaublich leistungsfähig und bietet die beste Möglichkeit, Seitenverhalten wie Latenz, Seitenressourcen oder das Ausführen von Konsolenbefehlen zu untersuchen.Das

(Tech- und Design-Tipps)