Animationen CSS Klassen
< 1 min read
Es gibt eine Reihe von vordefinierten CSS Klassen mit denen Elemente die keine Animationsoptionen anbieten animiert werden können.
Einem Beispielelement können beispielsweise folgende Klassen zugeordnet werden (fett: required, kursiv: optional):
- animated fadeInUp wpb_animate_when_almost_visible wpb_start_animation
Die CSS Klassen definieren folgende Parameter:
- animated (required)
- animation-duration: Gibt der Animation die Dauer von 1 Sekunde
- fadeInUp (required)
- Name der CSS Animation
- wpb_start_animation (optional)
- Setzt die Opacity auf 1
- wpb_animate_when_almost_visible (optional)
- Ist an einen JS Hook gebunden und animiert das Element erst kurz bevor es in den Bildschirm ragt
Als Animationsarten sind folgende CSS Deklarationen verfügbar:
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- flipInX
- flipInY
- lightSpeedIn
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rollIn
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- top-to-bottom
- bottom-to-top
- left-to-right
- right-to-left
- appear
Powered by BetterDocs