header-logo
Verbessere deine Kenntnisse mit unseren Tutorials.
Erhalte Tipps für Webdesign, Marketing und mehr.
Erfahre, wie du den organischen Traffic steigerst.
Erstelle eine Website mit unserer Full-Stack-Plattform.
Finde einen Spezialisten, der dir hilft, deine Ziele zu erreichen.
placeholder-preview-image

Wix Editor: Eine Animation hinzufügen und anpassen

4 min
Verwende Animationen, um deine Website zum Leben zu erwecken. Füge Effekte wie „Einschweben“ und „Ausdehnen“ hinzu, um fantasievolle, ansprechende Seiten zu erstellen. Du kannst auswählen, wie und wann deine Animationen abgespielt werden sollen - nur einmal, beim Scrollen, in Loop und mehr.
Du kannst Animationen auf eine Vielzahl von Elementen anwenden und sogar unterschiedliche Effekte auf dasselbe Element auf deiner Desktop- und Mobile-Website anwenden. Unsere Mobile-Animationen sind für kleinere Bildschirme geeignet, sodass du deine Besucher auf jedem Gerät beeindrucken kannst.
Gif, das verschiedene Bildanimationen zeigt, wenn durch die Website gescrollt wird
In diesem Artikel erfährst du mehr über folgende Themen:
Probleme mit deiner Animation?
Folge unseren Schritten hier, damit sie auf deiner Live-Website wie erwartet funktionieren.

Animation zu einem Element hinzufügen

Füge eine Animation zu deinen Elementen hinzu, um deine Website dynamisch und ansprechend zu gestalten. Jede Animation hat ihren eigenen Effekt, sodass du sie mit verschiedenen Elementen kombinieren kannst und bei deinen Besuchern einen bleibenden Eindruck hinterlässt.
Tipp:
Du kannst einer Gruppe von Elementen eine Animation hinzufügen, indem du die Gruppe auswählst und auf das Symbol für Animation  klickst.

Um eine Animation hinzuzufügen:

  1. Klicke in deinem Editor auf das entsprechende Element.
  2. Klicke auf das Symbol für Animation .
  3. Wähle eine Animation aus den verfügbaren Optionen aus.
    • Entrance: Die Animation wird einmal abgespielt, wenn das ausgewählte Element auf dem Bildschirm angezeigt wird.
    • Loop: Die Animation wird in einer Endlosschleife abgespielt.
    • Scroll: Die Animation wird abgespielt, wenn das Element in die Ansicht gescrollt wird.
Gif, das eine Reihe verschiedener Animationen zeigt, die in einer Schleife angezeigt werden können
Hinweis:
Elemente in deiner Kopfzeile werden nur einmal beim ersten Besuch der Seite animiert.

Eine Animation anpassen

Nachdem du eine Animation zu einem Element hinzugefügt hast, kannst du diese so anpassen, dass sie sich so verhält, wie du möchtest und wie es zu deiner Website passt.
Passe Einstellungen wie Leistung, Richtung und Verzögerung an, um deine Besucher zu beeindrucken und zu begeistern.
Hinweis:
Die verfügbaren Anpassungsoptionen hängen von der ausgewählten Animation ab.

Um die Animation anzupassen:

  1. Klicke in deinem Editor auf das entsprechende Element.
  2. Klicke auf das Symbol für Animation .
  3. Klicke auf Anpassen und verwende die folgenden Optionen, um deine Animation anzupassen: 
    • Leistung: Klicke auf das Dropdown-Menü und wähle aus, wie stark die Animation beim Abspielen ist.
    • Richtung: Wähle, aus welcher Richtung die Animation ausgeführt wird (z. B. im Uhrzeigersinn oder von rechts).
    • Abstand: Verwende den Schieberegler, um den Abstand zwischen dem Start- und dem Endpunkt des Effekts zu ändern.
    • Dauer: Verwende den Schieberegler, um festzulegen, wie lange die Animation abgespielt werden soll.
    • Verzögerung: Verwende den Schieberegler, um die Verzögerung zwischen dem Laden der Seite und dem Beginn der Animation zu erhöhen oder zu verringern.
    • Animationstyp: Wähle beim Scrollen zwischen In-, Out- oder kontinuierlicher Animation.
    • Bewegungsstil: Wähle die Intensität der Bewegung aus, zum Beispiel leicht oder mäßig.
Screenshot der Einstellungen für die Spiegelanimation, die verschiedene Einstellungen wie Richtung und Dauer der Animation anzeigt

Animationen zu der mobilen Version deiner Website hinzufügen

Du kannst nicht nur Animationen zu Elementen auf deiner Desktop-Website hinzufügen, sondern sie auch zu der mobilen Version deiner Website hinzufügen, damit deine Besucher ein großartiges Browser-Erlebnis auf all ihren Geräten erhalten.
Animationen für Mobile wurden speziell für kleinere Bildschirmauflösungen und -größen entwickelt, sodass du dir keine Gedanken über die Abstände machen musst. 
Hinweis:
Animationseffekte, die du auf dem Desktop hinzufügst, werden nicht auf deine Mobile-Website übertragen, da sie für unterschiedliche Bildschirmgrößen optimiert sind. Wenn du möchtest, dass ein Element auch in der Mobile-Ansicht Mobile animiert wird, folge den untenstehenden Schritten.

Um eine Animation zu der mobilen Version hinzuzufügen:

  1. Öffne deinen Mobile-Editor.
  2. Klicke auf das entsprechende Element.
  3. Klicke auf das Symbol für Animation .
  4. Wähle eine Animation aus den verfügbaren Optionen aus.
Eine Animation für ein Element im Mobile-Editor auswählen
Wichtiger Hinweis zu Velo:
Wenn du Velo (Code) verwendest, um ein Element ein- oder auszublenden, muss die Animation auch über Velo eingestellt werden.
Gif, das verschiedene Bildanimationen zeigt, wenn durch die Website gescrollt wird
Gif, das eine Reihe verschiedener Animationen zeigt, die in einer Schleife angezeigt werden können
Screenshot der Einstellungen für die Spiegelanimation, die verschiedene Einstellungen wie Richtung und Dauer der Animation anzeigt
Eine Animation für ein Element im Mobile-Editor auswählen