Animations

Ce module reprend les animations de « animate.css »

Utiliser la classe du module wpeo-animate puis le nom de l’animation, exemple : bounce

Animation au survol

La classe animate-hover permet de déclencher l’animation directement au survol de l’élément.

<div class="wpeo-animate animate-hover bounce"></div>
.bounce

Animation par évènement

Ajouter la classe animate-on lors d’un évènement javascript pour déclencer l’animation.

<div class="wpeo-animate animate-on bounce"></div>

Cliquer pour activer l’animation

.bounce

Liste de toutes les animations

Attention Seekers

.bounce
.flash
.headShake
.jello
.pulse
.rubberBand
.shake
.swing
.tada
.wobble

Bouncing entrances

Cliquer pour activer l'animation

.bounceIn
.bounceInDown
.bounceInLeft
.bounceInRight
.bounceInUp

Bouncing exits

Cliquer pour activer l'animation

.bounceOut
.bounceOutDown
.bounceOutLeft
.bounceOutRight
.bounceOutUp

Fading entrances

Cliquer pour activer l'animation

.fadeIn
.fadeInDown
.fadeInDownBig
.fadeInLeft
.fadeInLeftBig
.fadeInRight
.fadeInRightBig
.fadeInUp
.fadeInUpBig

Fading exits

Cliquer pour activer l'animation

.fadeOut
.fadeOutDown
.fadeOutDownBig
.fadeOutLeft
.fadeOutLeftBig
.fadeOutRight
.fadeOutRightBig
.fadeOutUp
.fadeOutUpBig

Sliding entrances

Cliquer pour activer l'animation

.slideInDown
.slideInLeft
.slideInRight
.slideInUp

Sliding exits

Cliquer pour activer l'animation

.slideOutDown
.slideOutLeft
.slideOutRight
.slideOutUp

Custom

.bounceInLight
.rotate
.downAndUp