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:
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:
Screenshots
Last updated
Was this helpful?
