Animationen CSS Klassen

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