animeCSS

Animations en entrée

Ces animations se déclenchent lorsque l'élément entre dans la zone de vue (viewport) puis restent en place. L'attribut data-anime permet de spécifier le type d'animation.

L'option entry (optionnelle) permet de spécifier que l'animation se déclenche lorsqu'un élément entre dans la zone de vue, par exemple data-anime="slide-up entry" ou data-anime="fade-up entry".

Slide

slide-left

slide-up

slide-right

Fade

fade-left

fade-up

fade-right

Pulse

pulse

Reveal

reveal

Flip

flip-y

flip-x

Animations en sortie

L'option exit permet de spécifier que l'animation se déclenche lorsqu'un élément sort de la zone de vue, par exemple data-anime="slide-up exit" ou data-anime="fade-up exit".

Slide

slide-left exit

slide-up exit

slide-right exit

Fade

fade-left exit

fade-up exit

fade-right exit

Pulse

pulse exit

Reveal

reveal exit

Flip

flip-y exit

flip-x exit

Entrée et sortie à la fois

Il est possible d'appliquer les deux options entry et exit à la fois, par exemple data-anime="slide-up entry exit" ou data-anime="fade-up entry exit".

Slide

slide-left entry exit

slide-up entry exit

slide-right entry exit

Offsets (Distance)

Le mot-clé "offset-s-m-l" permet de changer l'amplitude du mouvement. Par défaut : 40px.

(défaut 40px)

offset (80px)

offset-m (50%)

offset-l (100%)

Bounce

Le mot-clé "bounce" permet de faire rebondir l'animation plutôt que l'accélération linéaire de base.

fade-left bounce entry exit

fade-up bounce entry exit

fade-right bounce entry exit

Delay

Le mot-clé "delay-s-m-l" permet de retarder le début de l'animation.

fade-up entry exit

fade-up entry delay-s exit

fade-up entry delay-m exit

Animations au survol et focus (Hover)

Animations déclenchées au :hover ou :focus-visible. Ici aussi, l'attribut data-anime permet de spécifier le type d'animation et l'option hover déclenche l'animation au survol et focus.