# CSS Scroll-Triggered Animations : visualiser et ajuster les plages

Source canonique : [CSS Scroll-Triggered Animations : visualiser et ajuster les plages](<https://sebastien.rigaux.be/veille/liens/css-scroll-triggered-animations-visualiser-et-ajuster-les-plages>)

Cette extension pour Chrome DevTools rend les animations CSS déclenchées par le défilement plus faciles à diagnostiquer : une minimap situe le scroller, l’élément et le sujet, tandis que des repères colorés montrent les plages d’activation et d’activité. Les valeurs se modifient en direct ; l’outil prend en charge `ScrollTimeline`, `ViewTimeline` et les éléments en `position: sticky`.

Deux limites viennent de Chrome : les unités relatives comme `90vh` sont ramenées à des pixels calculés, et les éléments dans un `iframe` ne sont pas pris en charge. L’extension répond ainsi à un manque des DevTools, en attendant un éventuel support intégré.

- Sélectionné le : 2026-10-22

- Publication de la ressource : 2026-10-14

- Mise à jour de la fiche : 2026-11-07T20:32:37+0000

- Format : Article

- Langue de la source : EN

- Crédit : @bramus

- Repéré via : [Frontend Focus](<https://frontendfoc.us/>)

Ressource originale : [CSS Scroll-Triggered Animations : visualiser et ajuster les plages](<https://www.bram.us/2026/10/14/scroll-triggered-animations-debugger-devtools-extension/>)

Tags : [CSS](<https://sebastien.rigaux.be/veille/tags/css>) · [Animation](<https://sebastien.rigaux.be/veille/tags/animation>) · [Developer Experience](<https://sebastien.rigaux.be/veille/tags/developer-experience>)

Versions disponibles : [Français](<https://sebastien.rigaux.be/veille/liens/css-scroll-triggered-animations-visualiser-et-ajuster-les-plages>) · [English](<https://sebastien.rigaux.be/en/tech-watch/links/css-scroll-triggered-animations-visualize-and-adjust-ranges>)

[Retour à la veille](<https://sebastien.rigaux.be/veille>)