Hinzufügen von CSS-Animationen zu WordPress

Animationen können ein ansprechendes und visuell interessantes Feature für Ihre Webseiten sein. Das Erstellen von Animationen mit Flash oder JavaScript verbraucht jedoch einen erheblichen Teil der Ressourcen Ihrer Website.

Glücklicherweise können Sie Ihrer WordPress-Website stattdessen Animationen mit Cascading Style Sheets (CSS) hinzufügen. Diese Programmiersprache ermöglicht es Ihnen, unbegrenzt viele Animationen auf Ihrer Website zu integrieren, ist aber dennoch relativ zugänglich und leicht zu erlernen.

In diesem Artikel besprechen wir, wie CSS-Animationen funktionieren und wie Sie Ihrer Website eine CSS-Animationseigenschaft mit und ohne Plugins hinzufügen. Lasst uns aufbrechen!

Wie funktionieren CSS-Animationen? (Und warum Sie sie verwenden sollten)

CSS3 bietet Benutzern die Möglichkeit, Animationen zu erstellen, indem sie den Stil eines Elements (z. B. eines Bilds oder einer Schaltfläche) im Laufe der Zeit ändern. Sie können beliebig viele CSS-Eigenschaften des Elements ändern, so oft Sie möchten.

Im Gegensatz zu Flash- oder Javascript-Animationen vermeiden CSS-Animationen Browserkompatibilitätsprobleme und komplizierte Codierung. So können Sie die Aufmerksamkeit auf wichtige Funktionen lenken, ohne negative Nebenwirkungen wie z. B. Leistungseinbußen.

Hinzufügen von CSS-Animationen mit einem Plugin

Wenn Sie sich in Ihren Programmierkenntnissen nicht sicher sind, sind Sie bei uns richtig. Sie können stattdessen ganz einfach CSS-Animationen mit einem Plugin erstellen.

Schritt 1: Installieren und aktivieren Sie ein CSS-Animations-Plugin

Um zu beginnen, müssen Sie ein CSS-Animations-Plugin installieren. Wir verwenden Blocks Animation: CSS Animations for Gutenberg Blocks, ein relativ neues Tool, das speziell für den Blockeditor entwickelt wurde.

Sie finden dieses Plugin, indem Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen navigieren. Sobald Sie es gefunden haben, klicken Sie auf Jetzt installieren und dann auf Aktivieren :

Gehen Sie nach Abschluss der Aktivierung zu dem Beitrag oder der Seite, auf der Sie Ihre einfache Animation einfügen möchten.

Schritt 2: Gestalten Sie Ihre Animation

Klicken Sie anschließend auf das Element, das Sie animieren möchten. Suchen Sie auf der Registerkarte Block der Seitenleiste nach dem Abschnitt mit der Bezeichnung Animation , der hinzugefügt wurde, als wir das Plugin in Schritt 1 aktiviert haben . Hier sehen Sie ein Dropdown-Menü, das verschiedene Effekte auflistet:

Sie können mit so vielen Animationsoptionen herumspielen, wie Sie möchten, um diejenige zu finden, die zu Ihren Inhalten passt.

Schritt 3: Passen Sie Verzögerung und Geschwindigkeit an

Das Blocks Animation-Plug-in enthält auch eine Timing-Funktion, mit der Sie die Verzögerung und Geschwindigkeit Ihrer Animation anpassen können:

Die erste dieser beiden Einstellungen verschiebt den Start der Animation. Dies kann dazu beitragen, die Aufmerksamkeit auf Ihr Element zu lenken, nachdem die Seite geladen wurde, oder es Ihnen ermöglichen, Animationen in Kombination zu verwenden, wie wir in Kürze demonstrieren werden. Sie können die Animationsverzögerungseigenschaft auf fünf Sekunden einstellen.

Mit dem Geschwindigkeits-Dropdown können Sie Ihre Animation Langsam, Langsamer, Schnell oder Schneller machen. Eine langsamere Animation kann für Besucher subtiler und weniger störend sein, während eine schnellere Animation mehr dazu beiträgt, ihre Aufmerksamkeit zu erregen.

Schritt 4: Speichern und Vorschau Ihrer Animation

Wir empfehlen, Ihren Beitrag oder Ihre Seite als Entwurf zu speichern und eine Vorschau Ihres animierten Elements anzuzeigen, bevor Sie es veröffentlichen. Stellen Sie sicher, dass Sie auch die Eigenschaft Animationsname speichern, wenn Sie mit mehreren CSS-Animationen auf einer Seite arbeiten. Während sich Animationen als sehr nützlich erweisen können, können sie auch ablenken und Ihre Seiten unübersichtlich erscheinen lassen.

Wenn Sie eine Vorschau Ihrer Seite anzeigen und Ihre Animationen relativ einfach halten, werden diese unerwünschten Ergebnisse verhindert. Unten sehen Sie unser fertiges CSS-Animationsbeispiel, das ein animiertes Bild mit der Schaltfläche koppelt, die wir in den vorherigen Schritten gestaltet haben:

Falls Sie feststellen, dass Ihre Animation nicht zum Rest Ihres Inhalts passt oder den gewünschten Effekt hat, können Sie einfach zum Blockeditor zurückkehren und ihn anpassen. Das ist das Schöne an der Verwendung eines CSS-Animations-Plugins – es ist schnell und einfach.

Hinzufügen von CSS-Animationen ohne Plugin

Wenn Sie mit der Bearbeitung der Dateien Ihres Designs vertraut sind, können Sie benutzerdefinierte Animationen manuell ohne ein Plugin erstellen. Es erfordert ein wenig Codierungs-Know-how, daher sollte diese Lösung am besten denjenigen mit Entwicklungserfahrung überlassen werden.

Bevor Sie beginnen, stellen Sie sicher, dass Sie Ihre Website sichern. Es ist auch ratsam, ein untergeordnetes Design zu verwenden, damit Sie bei Bedarf problemlos zu den Standarddateien Ihres Designs zurückkehren können.

Schritt 1: Verstehen Sie die beteiligten CSS-Eigenschaften

Bevor Sie tatsächlich etwas bearbeiten, sollten Sie beim Erstellen von CSS-Animationen acht wichtige Eigenschaften beachten:

• @keyframes: Gibt die Stile an, die durch die Animation auf das Element angewendet werden.
• Animationsname: Erstellt einen Namen, mit dem Sie an anderer Stelle in Ihrem Code auf die Animation verweisen können.
• animation-duration: Legt fest, wie lange die Animation laufen soll.
• animation-delay: Gibt an, wie lange eine Animation warten soll, bis sie beginnt, sobald die Seite geladen ist.
• animation-iteration-count: Gibt an, wie oft die Animation ausgeführt werden soll.
• animations-direction: Gibt an, in welche Richtung die Animation laufen soll.
• animation-timing-function: Bestimmt den Geschwindigkeitsverlauf der Animation.
• animation-fill-mode: Gibt einen Stil für das Element an, wenn die Animation nicht abgespielt wird.
• Animation: Eine abgekürzte Eigenschaft zum Binden von Keyframes an Elemente.

Die wichtigste dieser Eigenschaften, die es zu verstehen gilt, ist der „Keyframe“. Dieser Begriff stammt von handgezeichneten Animationsprozessen, bei denen das Hauptbild als Schlüsselbild bezeichnet wurde und andere gezeichnet wurden, um hinein oder heraus zu führen.

In der CSS-Animation gibt der Keyframe an, was passiert und wann. Nehmen Sie zum Beispiel diesen:

 @keyframes-Beispiel {
 0 % {Hintergrundfarbe: rot;}
 25 % {Hintergrundfarbe: Gelb;}
 50 % {Hintergrundfarbe: blau;}
 100 % {Hintergrundfarbe: grün;}
 }

Der obige Keyframe besagt, dass sich die Hintergrundfarbe des angegebenen Elements bei 25 Prozent der Animation von Rot zu Gelb ändert. Prozentsätze werden normalerweise verwendet, um das Timing der Animation zu definieren. Von und bis können jedoch anstelle von 0 % bzw. 100 % verwendet werden.

Schritt 2: Erstellen Sie Ihre animate.css- Datei

Um CSS-Animationen hinzuzufügen, müssen Sie mithilfe der obigen Eigenschaften eine Datei in Ihrem bevorzugten Texteditor erstellen. Es sollte Keyframes für alle Animationen enthalten, die Sie verwenden möchten. Dann binden Sie sie an bestimmte CSS-Klassen, damit Sie sie auf Elemente auf Ihrer Website anwenden können.

Hier ist ein Beispiel. Im folgenden Code erstellen wir zunächst eine CSS-Keyframe-Animation mit den Transformations- und Sichtbarkeitseigenschaften, die es uns ermöglichen, ein Element von der rechten Seite des Bildschirms einzuschieben:

 @keyframes slideInRight {
aus {
-webkit-transform: translate3d(100%, 0, 0);
transformieren: translate3d (100 %, 0, 0);
Sichtbarkeit: sichtbar;
}
zu {
-webkit-transform: translate3d(0, 0, 0);
transformieren: translate3d (0, 0, 0);
}
}

Wir müssen diesen Keyframe dann an eine CSS-Klasse binden. In diesem Fall heißt es slideInRight. Dieser Code wird direkt nach dem Keyframe oben in der Datei platziert:

 .slideInRight {
 -webkit-animationsname: slideInRight;
 Animationsname: slideInRight;
 }

Sie können diesen Vorgang wiederholen, um beliebig viele Animationen zu erstellen. Speichern Sie die Datei dann als animate.css. Alternativ können Sie die beliebte Datei Animate.css herunterladen. Es enthält die Keyframes und CSS-Klassen für Dutzende beliebter Animationen, sodass Sie Ihre eigene komplexe Animation nicht codieren müssen.

Schritt 3: Laden Sie Ihre animate.css- Datei auf Ihre Website hoch

Sobald Ihre animate.css -Datei vollständig ist, müssen Sie sie in das Verzeichnis Ihres Designs hochladen. Greifen Sie dazu über das File Transfer Protocol (FTP) und einen FTP-Client wie FileZilla auf Ihre Website zu. Die erforderlichen Zugangsdaten finden Sie in Ihrem Hosting-Account.

Du musst in dein public_html -Verzeichnis gehen, zu wp-content > themes navigieren und den Ordner für dein aktives Theme (oder Child-Theme) finden:

Suchen Sie nach einem Unterverzeichnis mit der Bezeichnung css . Falls vorhanden, laden Sie Ihre animate.css -Datei (oder die animate.mini.css -Datei aus Animate.css) hoch. Falls Sie diesen Ordner noch nicht haben, können Sie einfach ein neues Unterverzeichnis erstellen und es entsprechend benennen:

Nachdem Ihre Datei erfolgreich hochgeladen wurde, verlassen Sie Ihren FTP-Client nicht sofort. Sie müssen eine kleine Dateibearbeitung vornehmen, um auf dieses Stylesheet auf Ihrer WordPress-Site zugreifen zu können.

Schritt 4: Rufen Sie das Animate Stylesheet via functions.php auf

Suchen Sie als Nächstes im Ordner Ihres aktiven Designs Ihre Datei functions.php . Fügen Sie am Ende dieses Code-Snippet hinzu:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
Funktion wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}

Beachten Sie, dass Sie, wenn Sie die Datei animate.min.css aus Animate.css hochgeladen haben, in der letzten Zeile animate.min.css anstelle von animate.css verwenden müssen.

Dadurch kann Ihr Design das gerade hochgeladene Stylesheet aufrufen, sodass Sie die darin enthaltenen Klassen auf Elemente auf Ihrer Website anwenden können. Sobald Ihre Änderungen gespeichert sind, kehren Sie zu Ihrem WordPress-Dashboard zurück.

Schritt 5: Wenden Sie Animationen mit CSS-Klassen an

Sie können jetzt jede Klasse in Ihrer animate.css -Datei auf Elemente in Ihren Beiträgen und Seiten anwenden. Wenn Sie die Animate.css-Datei verwenden, können Sie auf GitHub auf eine vollständige Liste aller darin enthaltenen Dateien verweisen.

Navigieren Sie zu dem Beitrag oder der Seite mit dem Element, das Sie animieren möchten. Wechseln Sie im Classic Editor zum Texteditor. Wenn Sie den Blockeditor verwenden, klicken Sie auf das Dreipunktsymbol in der Blocksymbolleiste und wählen Sie Als HTML bearbeiten aus :

Fügen Sie dann die animierte Klasse und die Klasse für Ihre Animation zum Element-Tag hinzu:

Zeigen Sie schließlich eine Vorschau Ihres Beitrags oder Ihrer Seite an. Ihre Animation sollte jetzt funktionieren:

Sie können diesen Prozess anpassen, um beliebige Animationen in Ihre animate.css -Datei einzubinden.

Sorgen Sie mit WP Engine dafür, dass Ihre Website großartig aussieht

Die Verwendung visuell interessanter Funktionen wie Animationen kann die Besucher Ihrer Website ansprechen und für eine professionellere Online-Präsenz sorgen. Hier bei WP Engine sind wir stolz darauf, die besten Tipps und Tricks für WordPress-Entwickler bereitzustellen, damit Ihre Website immer optimal aussieht.

In Kombination mit unserer erstklassigen Hosting-Plattform verfügen Sie über alle Tools, die Sie benötigen, um Ihre Benutzer zu beeindrucken. Sehen Sie sich noch heute unsere Pläne an!