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.