# Zusätzliche CSS-Klassen für Animationen

In diesem Artikel erfährst du mehr über zusätzliche CSS-Klassen für Animationen in ThemeWare®.

{% hint style="info" %}
**Hinweis**: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: [ThemeWare® Services im Überblick](https://service.themeware.design/service)
{% endhint %}

***

ThemeWare® verfügt über unterschiedliche Sammlungen an CSS-Klassen die du je nach Bedarf aktivieren oder deaktivieren kannst.

Die Konfiguration dafür findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".

In diesem Artikel erklären wir dir die Funktion der zusätzlichen "**CSS-Klassen für Animationen**".

***

## CSS-Klassen für Animationen

Diese Sammlung aktivierst/deaktivierst du über die Konfiguration "CSS-Klassen für Animationen laden (optional)".

Ist diese Konfiguration aktiviert lädt ThemeWare® die folgenden Animations-Klassen:

| CSS-Klasse               | Beschreibung |
| ------------------------ | ------------ |
| twt-back-in-down         | folgt...     |
| twt-back-in-left         |              |
| twt-back-in-right        |              |
| twt-back-in-up           |              |
| twt-bounce               |              |
| twt-bounce-in            |              |
| twt-bounce-in-down       |              |
| twt-bounce-in-left       |              |
| twt-bounce-in-right      |              |
| twt-bounce-in-up         |              |
| twt-fade-in              |              |
| twt-fade-in-down         |              |
| twt-fade-in-left         |              |
| twt-fade-in-right        |              |
| twt-fade-in-up           |              |
| twt-flash                |              |
| twt-flip                 |              |
| twt-flip-in-x            |              |
| twt-flip-in-y            |              |
| twt-head-shake           |              |
| twt-heartbeat            |              |
| twt-jack-in-the-box      |              |
| twt-jello                |              |
| twt-lightspeed-in-right  |              |
| twt-lightspeed-in-left   |              |
| twt-pulse                |              |
| twt-rotate-in            |              |
| twt-rotate-in-down-left  |              |
| twt-rotate-in-down-right |              |
| twt-rotate-in-up-left    |              |
| twt-rotate-in-up-right   |              |
| twt-rubber-band          |              |
| twt-shake-x              |              |
| twt-shake-y              |              |
| twt-swing                |              |
| twt-tada                 |              |
| twt-wobble               |              |
| twt-zoom-in              |              |
| twt-zoom-in-down         |              |
| twt-zoom-in-left         |              |
| twt-zoom-in-right        |              |
| twt-zoom-in-up           |              |

***

### Anwendungsbeispiel

Die oben genannten CSS-Klassen kannst du einfach im HTML-Editor eines CMS-Elements nutzen um ein bestimmtes HTML-Element damit zu animieren. Damit die Animation ausgeführt wird, ist zusätzlich die CSS-Klasse `twt-animate` nötig.

Der Code sieht dann etwas wie folgt aus:

```html
<h2 style="text-align: center;" class="twt-animate twt-back-in-down">Überschrift für einen Text</h2>
<hr>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
```

#### Screenshots

<figure><img src="/files/FS0YPHEKOOJUoXsjMcgC" alt=""><figcaption><p>Beispiel: CSS-Klassen für Scroll-Animationen</p></figcaption></figure>


---

# 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/profiwissen/zusaetzliche-css-klassen-fuer-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.