# Animationen

Animationen sind eine effektive Möglichkeit, um das Engagement der Nutzer zu erhöhen und die visuelle Attraktivität deiner Webseite zu steigern. Durch **animierte Blöcke** kannst du Inhalte hervorheben, den Lesefluss fördern und eine dynamische Benutzererfahrung schaffen. Hier erfährst du, wie du Blöcke der Erlebniswelten mit Hilfe des CMS Bundles animieren kannst.

{% hint style="info" %}
**Was sind animierte Blöcke überhaupt?**

Animierte Blöcke sind Inhalte, die durch verschiedene Bewegungseffekte beim **Laden der Seite** oder **beim Scrollen** aktiviert werden. Sie verleihen der Webseite nicht nur eine moderne Ästhetik, sondern helfen auch, wichtige Informationen und Aktionen hervorzuheben.
{% endhint %}

### So setzt du die Animationseinstellungen

1. **Block auswählen:** \
   Wähle den Block aus, den du animieren möchtest, und öffne die erweiterten Block-Einstellungen des CMS Bundles.
2. **Animationen einstellen:**\
   Unter **Animationen** findest du die Einstellungen, die du für den Block setzen kannst.

<figure><img src="/files/yfwj7OOr2ocdp4zTPsew" alt=""><figcaption></figcaption></figure>

### Grundlegende Einstellungen

<table><thead><tr><th width="223">Einstellung</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>Animationstyp</strong></td><td>Die verschiedenen Typen der Animation (zoom, flip, fade, ...) </td></tr><tr><td><strong>Verhalten</strong></td><td>Das Verhalten bestimmt die dynamik der Animation. Bspw. kannst du einen schnellen Anfang, aber ein langsameres Ende der Animation wählen.</td></tr></tbody></table>

### Erweiterte Animationseinstellungen

Bei Klick auf den Button Erweiterte Animationseinstellungen erscheint ein Pupup mit weiteren Einstellungsmöglichkeiten.

<figure><img src="/files/OzalsC8E20Rq41WRjVcF" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="307">Einstellung</th><th>Beschreibung</th></tr></thead><tbody><tr><td><strong>Darstellung der Animation</strong></td><td>Das generelle Verhalten der Animation</td></tr><tr><td><strong>Dauer der Animation</strong></td><td>So lange dauert es, bis die Animation vollständig durchlaufen ist (in Millisekunden).</td></tr><tr><td><strong>Verzögerung bis zur Animation</strong></td><td>Hier stellst du die Verzögerung des Starts der Animation in Millisekunden ein.</td></tr><tr><td><strong>Ankerpunkt (Erweitert)</strong></td><td>Wenn der eingetragene Selektor sichtbar ist, wird die Animation des Blocks ausgeführt. So kannst du Ihnalte voneinander abhängig machen.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/sektionen-und-blocke/blocke/animationen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.