Une collection d'animations CSS modernes et légères, pilotables via l'attribut HTML data-anime au sein d'un fichier CSS unique anime.css.
Ce projet explore et démontre l'utilisation des dernières fonctionnalités CSS :
- Scroll-driven Animations : Animations déclenchées par le défilement.
- View Transition API : Transitions fluides entre les pages (MPA).
- Autres animations modernes :
@starting-style,interpolate-size, etc. (à venir)
Il suffit d'importer le fichier CSS anime.css dans votre projet (de préférence dans le fichier d'import général app.css).
/* app.css */
@import "anime.css" layer(utilities);Une démo est disponible dans le fichier demo.html.
Ajoutez l'attribut data-anime sur n'importe quel élément HTML. Vous pouvez combiner plusieurs mots-clés :
- Type :
slide-up,slide-left,slide-right,fade-up,fade-left,fade-right,pulse,reveal,flip-y,flip-x. - Moment :
entry: Déclenche l'animation lorsque l'élément entre dans la vue.exit: Déclenche l'animation lorsque l'élément sort de la vue.entry exit: Déclenche l'animation lorsque l'élément entre et sort de la vue.
- Easing :
bounce: Ajoute un effet de rebond.pulse: Variante de timing (aussi disponible en type d'animation).
- Offset (Distance) :
- (par défaut) : 40px
offset(ouoffset-s) : 60pxoffset-m: 50%offset-l: 100%
- Delay :
delay-s(oudelay) : Retarde l'animation de 3% du scroll.delay-m: Retarde l'animation de 6% du scroll.delay-l: Retarde l'animation de 9% du scroll.
Exemples :
<!-- Apparition en glissant vers le haut -->
<div data-anime="slide-up entry">...</div>
<!-- Pulse avec effet bounce -->
<div data-anime="pulse entry bounce">...</div>
<!-- Cumul entrée et sortie -->
<div data-anime="fade-up entry exit">...</div>Certaines animations se déclenchent au :hover ou :focus-visible :
shake: Secousse.spaceboots: Flottement dans l'espace.
<button data-anime="shake">Survolez-moi</button>Pour activer les transitions fluides entre deux pages (Cross-Document View Transitions), ajoutez l'attribut data-anime sur l'élément <html>.
<html
lang="fr"
data-anime="view view-down"></html>(Note : Ce projet utilise @view-transition { navigation: auto; } en CSS, compatible avec les navigateurs récents).
Le projet respecte les préférences utilisateur. Si prefers-reduced-motion: reduce est activé au niveau du système, toutes les animations (scroll, hover, view transitions) sont désactivées.
- Scroll-driven Animations : Chrome 115+, Edge 115+.
- View Transition API : Chrome 111+, Edge 111+, Safari 18+.