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.

Color Safe ist das WCAG-konforme Farbauswahlwerkzeug, das Designer benötigen

Webdesigner drängen ständig auf mehr Zugänglichkeit . Dies bedeutet eine verstärkte Unterstützung für Hör- und Sehbehinderungen im Web, was auch Probleme beim Lesen von kontrastreichen Websites beinhalten kann.Die Color Safe Web App ist perfekt, um genau die Farben zu finden, die genau zu Ihren Anforderungen passen. Es is

(Tech- und Design-Tipps)

Der definitive Leitfaden zu CSS-Pseudoklassen

Ob Sie ein Anfänger oder ein erfahrener CSS-Entwickler sind, Sie haben wahrscheinlich schon von Pseudo-Klassen gehört . Die bekannteste Pseudo-Klasse ist wahrscheinlich :hover, mit dem wir ein Element :hover, wenn es sich im Hover-Zustand befindet, dh wenn ein Zeigergerät, wie eine Maus, darauf zeigt.Na

(Tech- und Design-Tipps)