Anmelden
Startseite
Preise
Dokumentation
Rückmeldung
Deutsch

Animationen einstellen

Last updated on 12/6/2024@mrbirddev

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 eine Low-Code-Oberfläche, sodass es auch zugänglich ist, wenn Sie mit dem Codieren nicht vertraut sind.

Keyframe-Animationen sind der Ort, an dem 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 bewegt sich 20px nach unten für 2 Sekunden und dann 20px nach oben zurück in seine ursprüngliche 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 on 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.

Ziel(e)

Normalerweise müssen Sie dies nicht einstellen. Der Standardwert ist &, was das Hauptelement bedeutet.

Es gibt jedoch einige Fälle, in denen Sie es einstellen müssen.

  • Um das Erweiterter Hintergrund-Element zu animieren, können Sie Ziel(e) auf Erstes Kindelement setzen, da das Erweiterter Hintergrund-Element immer das erste Kind des Hauptelements sein wird.

  • Um eine gestaffelte Verzögerung auf alle Kinderelemente anzuwenden. Lesen Sie weiter im Abschnitt Verzögerung & gestaffelte Verzögerung für weitere Details.

Verzögerung & gestaffelte Verzögerung

Wenn Sie Verzögerung auf 1000ms setzen, wird die Animation nach einer Wartezeit von 1000ms abgespielt.

Wenn Sie Versatz auf 50ms setzen und die Ziele auf Alle direkten Kindelemente setzen. Die Animation wird auf jedes der direkten Kinderelemente angewendet und wartet

  • erstes Element, 1000ms,
  • zweites Element, 1050ms,
  • drittes Element, 1100ms,
  • ...

Textstaffelung

Dies funktioniert für eine Text-Komponente.

Wenn Sie Versatz setzen und die Ziele auf Alle Buchstaben setzen. Der Staffelungseffekt wird auf jeden Buchstaben angewendet.

Verwenden Sie die 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.

Loading...