> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/erlebniswelten-mit-css-animationen-verschoenern.md).

# CSS-Animationen für Erlebniswelten

## Animationen – CSS-Animationen für CMS-Blöcke

ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Animationen zum Verschönern deiner Erlebniswelten bereit. Nachfolgend erklären wir dir, wie du die "CSS-Scroll-Animationen" in nur 2 Schritten aktivieren und nutzen kannst.

<figure><img src="/files/YADE4KKMTXd7cJcJXGUj" alt=""><figcaption><p>Rechts: CSS-Scroll-Animation "Fade-in"</p></figcaption></figure>

{% hint style="success" %}
**Tipp**: Anwendungsbeispiele findest du auf den Startseiten in unseren [Demoshops](https://demo.themeware.design/modern).
{% endhint %}

***

## ThemeWare® CSS-Scroll-Animationen

### 1. Animationen aktivieren

1. Öffne die Administration deins Shops
2. Wechsel über die Hauptnavigation in den Theme-Manager ("Inhalte" => "Themes")\
   **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
3. Öffne die Konfiguration deines Themes
4. Wechsel im Tab "Erlebniswelten" in den Bereich "Alle Typen"
5. Im Abschnitt "CSS-Scroll-Animationen" findest du Konfigurationsfelder für "CMS-Blöcke" und "Überschriften in CMS-Blöcken"\
   ![](/files/QJsgl9idkEH5an2ZUO6g)
6. Wähle die gewünschte Animation für CMS-Blöcke bzw. die Überschriften in CMS-Blöcken (optional).
7. Speicher diese Änderung damit diese in die Storefront übernommen wird

### 2. Animationen anwenden

1. Wechsel über die Hauptnavigation in die Erlebniswelt-Verwaltung ("Inhalte" => "Erlebniswelten")
2. Bearbeite die gewünschte Erlebniswelt
3. Wähle den gewünschten CMS-Block aus, welchen du animieren möchtest
4. Öffne den Bereich "Layout" in den Block-Einstellungen am rechten Bildschirmrand
5. Füge die CSS-Klasse `twt-cms-animation` hinzu (mehrere Klassen werden durch Leerzeichen getrennt)\
   ![](/files/a8JyrbTjbk4fHJP9Dp0Y)
6. Speicher die Erlebniswelt

Der entsprechende CMS-Block sollte nun mit der gewünschten Animation animiert werden. Wiederhole "Step 2" für alle CMS-Blöcke, die du animieren möchtest.

Sollte die Änderung nicht in der Storefront ankommen, prüfe bitte ob das Theme dem entsprechenden Verkaufskanal zugewiesen wurde. Leere bei Änderungen dieser Art auch unbedingt einmal den gesamten Shopware sowie den Browser-Cache.

{% hint style="info" %}
**Hinweis**: Nutze die CSS-Animation nicht in CMS-Seiten die in Pop-ups bzw. Modals angezeigt werden. Dort funktionieren die Animationen nicht.
{% endhint %}

{% hint style="info" %}
**Hinweis**: Nutze die CSS-Animation nicht in CMS-Blöcken die Pop-ups bzw. Modals beinhalten. Dann funktionieren die Modals u.U. nicht.
{% endhint %}