Zusätzliche CSS-Klassen für Animationen

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

Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick

---

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:

<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

Beispiel: CSS-Klassen für Scroll-Animationen