# 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 %}


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/erlebniswelten-mit-css-animationen-verschoenern.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.