Dans les termes du Skill
Un skill de construction, pas un audit : il transforme une demande d'animation en une implémentation qui résisterait à une revue stricte, en suivant une séquence fixe — faut-il animer, l'objectif, l'outil, les propriétés, la courbe et la durée, l'interruption, la sortie — puis écrit le code.
Il s'adresse aux designers et aux développeurs qui veulent une décision prise, pas un menu d'options. Les détails viennent de tables strictes : paliers de fréquence, transform et opacity uniquement, courbes cubic-bezier nommées, plages de durée par élément, et le gating du reduced-motion et du survol livré avec l'animation. Pour auditer une base de code ou critiquer un diff, utilisez les skills associés.
Fonctionnement
- 01Commencer par le filtre de fréquence
La première étape peut clore le travail avant même qu'une ligne de code existe : tout ce qui s'ouvre plus de 100 fois par jour, ou se déclenche par un raccourci clavier, ne reçoit aucune animation.
- 02Nommer l'objectif en un mot
Pas d'objectif, pas d'animation. La demander parce que « ça fait cool », sur un élément que l'utilisateur voit en permanence, est une raison de s'arrêter plutôt que de construire.
- 03Prendre l'outil le moins coûteux qui fonctionne
Parcourez la table des outils et arrêtez-vous au premier qui convient : transition CSS, @starting-style, animation CSS, WAAPI, Motion.
- 04Restreindre les propriétés
transform et opacity font le travail parce qu'elles évitent layout et paint et s'exécutent sur le GPU ; clip-path est la quatrième autorisée, et animer height n'est toléré que pour les accordéons.
- 05Fixer la courbe et la durée d'après les tables
Entrer et sortir : ease-out ; déplacement à l'écran : ease-in-out ; survol et changements de couleur : ease ; mouvement constant : linear ; par défaut : ease-out.
- 06Prévoir l'interruption et la sortie
Les éléments redéclenchés rapidement utilisent des transitions, les gestes des springs, et la sortie reflète l'entrée pour que le swipe-to-dismiss soit évident.