Cette page présente les Scroll-Driven Animations, une nouvelle API CSS permettant de créer des animations déclenchées par le défilement, sans JavaScript. L’idée centrale est d’associer des animations existantes (comme @keyframes) à une progression de défilement plutôt qu’à une durée fixe, simplifiant ainsi les effets visuels dynamiques. L’auteur, Josh W. Comeau, illustre ce concept avec des exemples concrets et détaille son fonctionnement, tout en mentionnant les limites actuelles, notamment un support partiel des navigateurs (85 % selon Can I Use, avec Firefox nécessitant un flag).

L’article s’adresse aux développeurs familiarisés avec les animations CSS et explore des fonctionnalités avancées comme les timelines liés ou les plages d’animation personnalisées. Il aborde aussi les pièges à éviter et propose des solutions de contournement, comme un polyfill imparfait. Malgré un support encore incomplet, l’auteur encourage son adoption pour des améliorations cosmétiques, anticipant une généralisation prochaine, notamment dans Firefox.

Enfin, la page s’inscrit dans un contexte plus large, avec une mention de la sortie récente d’un cours de l’auteur sur les animations, bien que le contenu principal se concentre sur l’API elle-même. Les exemples interactifs permettent de tester les possibilités offertes par cette technologie émergente.

L'article explore la problématique des animations CSS redondantes dans les projets web. L'auteur souligne que les animations de base comme les fade-in, slide ou zoom sont souvent recréées de manière indépendante, entraînant une duplication inutile de code et une maintenance complexe. Il propose une solution pour standardiser ces animations en consolidant les @keyframes, transformant ainsi un système chaotique en un système clair et prévisible. Une lecture utile pour les développeurs front-end cherchant à optimiser leur code et leur flux de travail.

Josh W. Comeau analyse la nouvelle règle CSS @starting-style, qui permet d’utiliser des transitions pour animer l’apparition d’éléments (ex: fondu, déplacement), là où on utilisait avant des @keyframes.

Le piège :
Contrairement aux @keyframes, les styles définis dans @starting-style ne sont pas prioritaires et peuvent être écrasés par des sélecteurs plus spécifiques (ID, styles inline). Résultat : l’animation ne se déclenche pas.

Exemple :
Un bouton génère des particules avec une transition sur transform. Si la position finale est définie en JavaScript (style inline), @starting-style est ignoré.

Solutions :

• Forcer avec !important (peu maintenable),
• Utiliser des variables CSS pour égaliser la spécificité,
• Revenir aux @keyframes, plus simples et compatibles.

Verdict :
@starting-style est pratique, mais les @keyframes restent souvent plus fiables.