Révolution de l'animation CSS : View Transitions et mouvement piloté par le défilement
La façon dont nous animons le web subit un changement fondamental. Nous passons de simples transitions de « survol » à des transitions cinématographiques au niveau de la page et à des animations qui répondent directement à la position de défilement de l'utilisateur — le tout sans avoir besoin de lourdes bibliothèques JavaScript comme GSAP.
Dans ce guide, nous explorerons les fonctionnalités d'animation haute performance qui font que le web ressemble davantage à une application native.
2. Animations pilotées par le défilement : le mouvement avec un but
Les animations pilotées par le défilement lient la progression d'une animation directement à la position de défilement de l'utilisateur. C'est l'outil ultime pour le storytelling et les pages de destination interactives.
La fonction scroll()
Permet à une animation de progresser en fonction de la position de défilement d'un conteneur spécifique.
@keyframes progress-bar {
from { width: 0%; }
to { width: 100%; }
}
.progress {
animation: progress-bar linear;
animation-timeline: scroll(root block);
}
La fonction view()
Permet à une animation de progresser en fonction de la visibilité d'un élément dans la fenêtre d'affichage. C'est parfait pour les effets d'apparition progressive au défilement.
3. Peaufiner le mouvement : cubic-bezier et Spring
Une animation de haute qualité est une question de timing.
cubic-bezier
Permet de définir une courbe d'accélération (easing) personnalisée. Au lieu d'utiliser ease-in ou ease-out, vous pouvez créer des courbes personnalisées « rebondissantes » ou « nerveuses ».
.snappy-btn {
transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
Animations à ressort (Spring) (émergent)
De nouvelles spécifications CSS introduisent des fonctions de timing natives basées sur le ressort, permettant un mouvement qui suit les lois de la physique (masse, rigidité et amortissement), ce qui donne une sensation plus naturelle et « organique ».
4. Maîtriser les Keyframes et les Transitions
Bien que les nouvelles fonctionnalités soient passionnantes, les bases restent :
- @keyframes : définissez les étapes d'une animation (de 0 % à 100 %).
- transition : le moyen le plus simple d'animer les changements de propriété (comme
background-coloroutransform).
Conseil de pro : Animez les transformations et l'opacité
Pour garantir des performances à 60 ips, donnez la priorité à l'animation des propriétés que les navigateurs peuvent gérer sur le GPU : transform et opacity.
5. Contrôle de la chronologie avec @scroll-timeline
Le @scroll-timeline (et ses équivalents plus récents) permet un contrôle précis sur plusieurs animations. Vous pouvez définir une chronologie, puis l'appliquer à n'importe quel nombre d'éléments, garantissant qu'ils restent tous parfaitement synchronisés lorsque l'utilisateur fait défiler la page.
Résumé des outils d'animation
| Fonctionnalité | Idéal pour | Support |
|---|---|---|
| View Transitions | Navigations fluides de page/état | Chrome, Edge |
| Piloté par défilement | Progression et effets basés sur le défilement | Émergent |
| cubic-bezier | Accélération personnalisée, nerveuse ou rebondissante | Universel |
| Keyframes | Animations complexes en plusieurs étapes | Universel |
| transform | Mouvement haute performance (GPU) | Universel |
Conclusion
L'animation n'est plus une « décoration » — c'est une partie fonctionnelle de l'expérience utilisateur. En utilisant les View Transitions et le mouvement piloté par le défilement, vous pouvez fournir les commentaires et la continuité que les utilisateurs attendent des produits numériques modernes.
Prêt à animer ? Consultez notre Générateur d'animations CSS et restez à l'écoute pour notre prochain Cubic-bezier Playground et notre Scroll-driven Animation Builder !