jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur d'animations au defilement

Générez des animations CSS au defilement avec animation-timeline.

Chargement de l'outil...

Qu'est-ce que Generateur d'animations au defilement ?

Les animations pilotees par le defilement utilisent la position de defilement ou la position dans la fenetre d'un element comme ligne de temps d'animation au lieu du temps. La fonction scroll() suit la position du conteneur de defilement, et la fonction view() suit la position d'un element dans la fenetre. Cela permet de creer des barres de progression de lecture, des effets de revelation et des animations liees au defilement avec du CSS pur.

Réponse rapide

Les animations pilotees par le defilement permettent de lier la progression d'une animation directement a la position de defilement d'un conteneur, eliminant le besoin d'ecouteurs d'evenements de defilement et de bibliotheques de parallaxe basees sur JavaScript.

Last updated: 2026-05-25

Limites

  • Chrome 115+ et Edge 115+ prennent en charge les animations pilotees par le defilement. Firefox et Safari ne prennent pas encore en charge l'API ScrollTimeline.
  • Les animations pilotees par le defilement utilisent l'API Web Animations. Les @keyframes CSS sont toujours necessaires pour definir les etats d'animation.
  • La progression temporelle de scroll() et view() est determinee par la distance de defilement. Les animations peuvent se comporter differemment sur du contenu tres court ou tres long.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Choisissez le type de ligne de temps : scroll (suit le conteneur de defilement) ou view (suit la position de l'element dans la fenetre).
  2. Definissez la plage d'animation et les keyframes pour l'effet souhaite.
  3. L'outil genere le CSS pour l'element anime.
  4. Copiez le CSS et testez sur une page avec defilement pour verifier l'animation.

A quoi il sert

  • Creer une barre de progression de lecture en haut d'un article de blog.
  • Construire des effets de revelation fondu ou glissement vers le haut lorsque les sections defilent dans la vue.
  • Ajouter une animation de parallaxe ou liee au defilement en arriere-plan d'une page.

Cas d'usage

Exemples concrets

Exemple

Barre de progression de lecture de blog

Un article de blog affiche une barre de progression horizontale qui se remplit au fur et a mesure que le lecteur defile, en utilisant animation-timeline: scroll() sur le conteneur de l'article.

Exemple

Revelations de sections declenchees par le defilement

Les sections apparaissent en fondu lorsqu'elles entrent dans la fenetre en utilisant animation-timeline: view() avec une plage personnalisee commencant a 0% et se terminant a 50% de la visibilite de l'element.

Erreurs frequentes

  • Creer des animations qui se declenchent trop frequemment et nuisent aux performances de defilement.
  • Ne pas tester sur mobile ou le comportement de defilement differe du desktop.
  • Utiliser des animations pilotees par le defilement pour du contenu critique sans solution de repli statique.

Vérification

  1. Testez l'animation dans Chrome et verifiez que l'element s'anime fluidement lorsque la page defile.
  2. Verifiez l'animation dans Firefox et Safari pour confirmer qu'elle se degrade gracieusement sans casser la mise en page ou la fonctionnalite.

FAQ

Questions sur Generateur d'animations au defilement

Quels navigateurs prennent en charge les animations pilotees par le defilement ?

Chrome 115+, Edge 115+. Safari et Firefox developpent la prise en charge. Fournissez une solution de repli statique.

Quelle est la difference entre scroll() et view() ?

Scroll() suit la position de defilement d'un conteneur. View() suit la position de l'element par rapport a la fenetre.

Puis-je utiliser les animations pilotees par le defilement avec des keyframes CSS standard ?

Oui. Definissez des @keyframes standard comme d'habitude, puis attachez-les a une ligne de temps de defilement avec animation-timeline: scroll() ou animation-timeline: view(). Les pourcentages de keyframes correspondent a la progression du defilement : 0% est le debut et 100% est la fin.

Quel impact sur les performances ont les animations pilotees par le defilement ?

Elles s'executent sur le thread de composition, pas sur le thread JavaScript principal, offrant des performances fluides a 60 ips sans a-coups, meme pendant un travail intense sur le thread principal. Elles sont nettement plus performantes que les ecouteurs d'evenements de defilement JavaScript.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi