Le mouvement, repris tel quel.
Une animation décrite dans un document se perd à l’intégration : chacun l’interprète. Écrite dans la feuille de style de la maquette, elle EST le livrable — l’intégration la recopie, elle ne la devine pas.
CSSLes étapes, dans l’ordre.
- On choisit ce qui bouge, et pourquoi. Une animation sert à expliquer un changement d’état : ce qui apparaît, ce qui vient d’où, ce qui attend. Le reste est du bruit.
- On écrit les durées et les courbes. Des valeurs, pas des adjectifs. « Rapide » ne se reproduit pas ; 180 millisecondes avec une courbe nommée, si.
- On respecte le réglage du système. Quand le visiteur a demandé moins d’animations, le mouvement s’arrête et l’information reste : un élément figé à son premier instant serait un élément amputé.
- On le voit tourner dans l’aperçu. L’aperçu du Studio exécute le JavaScript quand il y en a ; l’éditeur, non, et c’est voulu — une maquette doit être belle sans lui.
À la fin, vous avez ça.
- Les animations écrites dans la feuille de style de la maquette
- Les durées, les retards et les courbes, nommés et réutilisables
- Le comportement quand les animations sont désactivées
- L’aperçu où le client voit le mouvement, par un simple lien
Les fonctionnalités qui servent ici.
Les questions qu’on nous pose.
Et s’il en manque une, le Discord répond plus vite que cette page.
Et les animations plus complexes ?
Elles peuvent passer par un script inerte attaché à la création, qui ne s’exécute que dans l’aperçu isolé. La règle reste la même : la page doit être complète et belle sans lui.
Faut-il une bibliothèque d’animation ?
Rarement. Les transitions et les animations de la feuille de style couvrent presque tout ; une bibliothèque se charge quand le mouvement est le sujet, et elle est alors épinglée à une version précise.
Comment valider une animation avec le client ?
Par le lien de partage : il la voit tourner dans son navigateur et commente à l’endroit exact. Une animation décrite au téléphone n’est jamais celle qu’on imaginait.
Dans la même famille.
Montage vidéo
Un film court monté rush par rush, avec titres et fondus, rendu en MP4.
Logo animé
Le logo qui se dessine, pour une ouverture de film ou une signature.
Son et voix off
Couper, normaliser, nettoyer une voix, égaliser, mixer une musique.
GIF et formats courts
Une boucle légère pour un e-mail, une présentation ou un réseau.