Animationen einstellen

Slidde.co ermöglicht es Ihnen, Standard-CSS-Keyframe-Animationen einfach auf Ihre Webelemente anzuwenden. Hier ist eine Schritt-für-Schritt-Anleitung, die Ihnen den Einstieg erleichtert.

die Animationsoption in der Seitenleiste

1. Wählen Sie ein Element aus: Klicken Sie auf ein beliebiges Element auf Ihrer Seite.
2. Öffnen Sie das Animation Modal: Klicken Sie in der rechten Seitenleiste auf den Animationen Tab-Button, dort finden Sie die Animation Option. Klicken Sie darauf, um ein Modal-Fenster zu öffnen.
3. Mit Voreinstellungen beginnen: Wir empfehlen, mit voreingestellten Animationen zu beginnen, die Sie später an Ihre Bedürfnisse anpassen können. Sie können auf die Voreinstellungs-Buttons klicken, um sie durch eine Voreinstellung zu ersetzen. Wenn Sie auf das Plus-Symbol im Button klicken, wird die Voreinstellung zur aktuellen Animation hinzugefügt.

Animationen anpassen

Das Animations-Modal vereinfacht den Prozess der Einrichtung von CSS-Keyframe-Animationen in einer Low-Code-Oberfläche, sodass es auch zugänglich ist, wenn Sie mit dem Codieren nicht vertraut sind.

Keyframe-Animationen sind dort, wo Sie die CSS-Eigenschaften für bestimmte Prozentsätze definieren. Und der Browser übernimmt die Übergänge für Sie.

Zum Beispiel, wenn Sie Keyframes wie diese mit einer Dauer von 4 Sekunden haben.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

Das Objekt wird sich 20px nach unten für 2 Sekunden bewegen und dann 20px nach oben zurück zu seiner ursprünglichen Position für 2 Sekunden.

Wenn Sie auf Probleme stoßen oder mehr über Keyframe-Animationen erfahren möchten:

• Online suchen: Googeln Sie Ihre spezifischen Fragen; es gibt viele Beispiele und Ressourcen.
• CSS Keyframes Tutorial: Verweisen Sie auf den offiziellen CSS Keyframes Guide auf MDN für umfassende Informationen.

Auslöser

Dieses Feld steuert, wann die Animation abgespielt wird.

• Element angezeigt: Dies ist die Standardeinstellung. Die Animation wird ausgelöst, wenn das Element entweder in den Sichtbereich gescrollt wird oder der enthaltene Abschnitt angezeigt wird Hash-Abschnitt
• Element angezeigt (jedes Mal wiederholen): Wie oben, außer dass die Animation jedes Mal wiederholt wird, wenn das Element angezeigt wird.
• Seite geladen: Die Animation wird ausgelöst, wenn die Seite geladen wird.

Animieren von Kindelementen

Sie können die Kinder des Wurzelelements anvisieren, indem Sie Targets auf &>* setzen.

Verzögerung staffeln

Wenn Sie die Verzögerung auf die folgenden Werte ändern, wird ein Staffelungseffekt angewendet.

targets: &>*
delay: anime.stagger(100) // Verzögerung um 100ms für jedes Element erhöhen.

targets: &>*
delay: anime.stagger(100, {start: 500}) // Verzögerung beginnt bei 500ms und erhöht sich dann um 100ms für jedes Element.

Für weitere Beispiele schauen Sie bitte hier Staggering basics

Text staffeln

Dies funktioniert für eine Text Komponente.

Wenn Sie die Ziele auf "Alle Buchstaben" (& .letter) setzen, wird der Staffelungseffekt auf jeden Buchstaben angewendet.

Verwendung der CSS-animation-Eigenschaft

Eine einfache CSS-Animation ist immer für alle Elemente in CSS verfügbar. Möglicherweise müssen Sie jedoch Disable in canvas für diese spezielle CSS-Regel aktivieren, um eine einfachere Bearbeitung im Editor zu ermöglichen.