Imaginez ceci : vous rejoignez un nouveau projet, plongez dans la base de code et, au cours des premières heures, vous découvrez quelque chose de frustrant et familier. Dispersées dans les feuilles de style, vous trouvez plusieurs définitions @keyframes pour les mêmes animations de base. Trois effets de fondu différents, deux ou trois variantes de diapositives, une poignée d'animations de zoom et au moins deux animations de rotation différentes, car pourquoi pas ? @keyframes impulsion { de { échelle : 1 ; } à { échelle : 1,1 ; } }
@keyframes plus grande impulsion { 0 %, 20 %, 100 % { échelle : 1 ; } 10 %, 40 % { échelle : 1,2 ; } }
Si ce scénario vous semble familier, vous n’êtes pas seul. D'après mon expérience dans divers projets, l'une des victoires rapides les plus cohérentes que je puisse réaliser est la consolidation et la standardisation des images clés. C'est devenu un modèle tellement fiable que j'attends maintenant avec impatience ce nettoyage comme l'une de mes premières tâches sur toute nouvelle base de code. La logique derrière le chaos Cette redondance est parfaitement logique quand on y pense. Nous utilisons tous les mêmes animations fondamentales dans notre travail quotidien : fondus, diapositives, zooms, rotations et autres effets courants. Ces animations sont assez simples et il est facile de créer une définition rapide de @keyframes pour faire le travail. Sans système d'animation centralisé, les développeurs écrivent naturellement ces images clés à partir de zéro, ignorant que des animations similaires existent déjà ailleurs dans la base de code. Ceci est particulièrement courant lorsque l'on travaille dans des architectures basées sur des composants (ce que la plupart d'entre nous font de nos jours), car les équipes travaillent souvent en parallèle sur différentes parties de l'application. Le résultat ? Chaos animé. Le petit problème Les problèmes les plus évidents liés à la duplication d’images clés sont le temps de développement perdu et la surcharge inutile du code. Plusieurs définitions d'images clés signifient plusieurs endroits à mettre à jour lorsque les exigences changent. Besoin d'ajuster le timing de votre animation de fondu ? Vous devrez rechercher chaque instance dans votre base de code. Vous souhaitez standardiser les fonctions d'assouplissement ? Bonne chance pour trouver toutes les variantes. Cette multiplication des points de maintenance fait que même de simples mises à jour d’animations deviennent une tâche chronophage. Le plus gros problème Cette duplication d’images clés crée un problème bien plus insidieux qui se cache sous la surface : le piège de la portée globale. Même lorsque vous travaillez avec des architectures basées sur des composants, les images clés CSS sont toujours définies dans la portée globale. Cela signifie que toutes les images clés s'appliquent à tous les composants. Toujours. Oui, votre animation n'utilise pas nécessairement les images clés que vous avez définies dans votre composant. Il utilise les dernières images clés correspondant exactement au même nom qui ont été chargées dans la portée globale. Tant que toutes vos images clés sont identiques, cela peut sembler un problème mineur. Mais dès que vous souhaitez personnaliser une animation pour un cas d’utilisation spécifique, vous êtes en difficulté, ou pire, c’est vous qui en êtes la cause. Soit votre animation ne fonctionnera pas parce qu'un autre composant chargé après le vôtre, écrasant vos images clés, soit votre composant se charge en dernier et modifie accidentellement le comportement de l'animation de tous les autres composants utilisant le nom de cette image clé, et vous ne vous en rendrez peut-être même pas compte. Voici un exemple simple qui illustre le problème : .composant-un { /* styles de composants */ animation : impulsion 1s, alternative infinie, facilité d'entrée et de sortie ; }
/* cette définition @keyframes ne fonctionnera pas */ @keyframes impulsion { de { échelle : 1 ; } à { échelle : 1,1 ; } }
/* plus tard dans le code... */
.composant-deux { /* styles de composants */ animation : impulsion 1s facilité d'entrée-sortie infinie ; }
/* ces images clés s'appliqueront aux deux composants */ @keyframes impulsion { 0 %, 20 %, 100 % { échelle : 1 ; } 10 %, 40 % { échelle : 1,2 ; } }
Les deux composants utilisent le même nom d'animation, mais la deuxième définition @keyframes écrase la première. Désormais, les composants un et deux utiliseront les secondes images clés, quel que soit le composant qui a défini quelles images clés. Voir les jetons Pen Keyframes - Démo 1 [forked] par Amit Sheen. Le pire ? Cela fonctionne souvent parfaitement en développement local mais s'interrompt mystérieusement en production lorsque les processus de construction modifient l'ordre de chargement de vos feuilles de style. Vous vous retrouvez avec des animations qui se comportent différemment selon les composants chargés et dans quel ordre. La solution : des images clés unifiées La réponse à ce chaos est étonnamment simple : des images clés dynamiques prédéfinies stockées dans une feuille de style partagée. Au lieu de laisser chaque composant définir ses propres animations, nous créons des images clés centralisées, bien documentées, faciles àutilisation, maintenable et adaptée aux besoins spécifiques de votre projet. Considérez-le comme des jetons d'images clés. Tout comme nous utilisons des jetons pour les couleurs et l'espacement, et que beaucoup d'entre nous utilisent déjà des jetons pour les propriétés d'animation, comme la durée et les fonctions d'accélération, pourquoi ne pas également utiliser des jetons pour les images clés ? Cette approche peut s'intégrer naturellement à n'importe quel flux de travail de jeton de conception actuel que vous utilisez, tout en résolvant à la fois le petit problème (duplication de code) et le plus gros problème (conflits de portée globale) en une seule fois. L’idée est simple : créer une source unique de vérité pour toutes nos animations communes. Cette feuille de style partagée contient des images clés soigneusement conçues qui couvrent les modèles d'animation réellement utilisés par notre projet. Plus besoin de deviner si une animation de fondu existe déjà quelque part dans notre base de code. Plus besoin d'écraser accidentellement les animations d'autres composants. Mais voici la clé : ce ne sont pas de simples animations statiques de copier-coller. Ils sont conçus pour être dynamiques et personnalisables grâce aux propriétés personnalisées CSS, ce qui nous permet de maintenir la cohérence tout en ayant la flexibilité d'adapter les animations à des cas d'utilisation spécifiques, comme si vous avez besoin d'une animation « pulsée » légèrement plus grande en un seul endroit. Construire le premier jeton d'images clés L’un des premiers fruits à portée de main que nous devrions aborder est l’animation en « fondu entrant ». Dans l'un de mes projets récents, j'ai trouvé plus d'une douzaine de définitions de fondu entrant distinctes, et oui, elles animaient toutes simplement l'opacité de 0 à 1. Alors, créons une nouvelle feuille de style, appelons-la kf-tokens.css, importons-la dans notre projet et plaçons nos images clés avec les commentaires appropriés à l'intérieur. /* images-clés-tokens.css */
/* * Fade In - animation d'entrée en fondu * Utilisation : animation : kf-fade-in 0,3s easy-out ; */ @keyframes kf-fade-in { de { opacité : 0 ; } à { opacité : 1 ; } }
Cette unique déclaration @keyframes remplace toutes ces animations de fondu entrant dispersées dans notre base de code. Propre, simple et applicable à l’échelle mondiale. Et maintenant que nous avons défini ce jeton, nous pouvons l'utiliser à partir de n'importe quel composant de notre projet : .modal { animation : kf-fade-in 0,3 s en douceur ; }
.info-bulle { animation : kf-fade-in 0,2 s, facilité d'entrée et de sortie ; }
.notification { animation : kf-fade-in 0,5 s en douceur ; }
Voir les Pen Keyframes Tokens - Demo 2 [forked] par Amit Sheen. Remarque : nous utilisons un préfixe kf- dans tous nos noms @keyframes. Ce préfixe sert d'espace de noms qui évite les conflits de noms avec les animations existantes dans le projet et indique immédiatement que ces images clés proviennent de notre fichier de jetons d'images clés. Créer une diapositive dynamique Les images clés kf-fade-in fonctionnent très bien car elles sont simples et il y a peu de place pour gâcher les choses. Cependant, dans d'autres animations, nous devons être beaucoup plus dynamiques, et ici nous pouvons exploiter l'énorme puissance des propriétés personnalisées CSS. C’est là que les jetons d’images clés brillent vraiment par rapport aux animations statiques dispersées. Prenons un scénario courant : les animations « slide-in ». Mais glisser d'où ? 100px à partir de la droite ? 50% de gauche ? Doit-il entrer par le haut de l’écran ? Ou peut-être flotter par le bas ? Autant de possibilités, mais au lieu de créer des images clés distinctes pour chaque direction et chaque variation, nous pouvons créer un jeton flexible qui s'adapte à tous les scénarios : /* * Slide In - animation de diapositive directionnelle * Utilisez --kf-slide-from pour contrôler la direction * Par défaut : glisse depuis la gauche (-100 %) * Utilisation : * animation : kf-slide-in 0,3s easy-out ; * --kf-slide-from : -100px 0 ; // glisser depuis la gauche * --kf-slide-from : 100px 0 ; // glisse depuis la droite * --kf-slide-from : 0 -50px ; // glisser du haut */
@keyframes kf-slide-in { de { traduire : var(--kf-slide-from, -100% 0); } à { traduire : 0 0 ; } }
Nous pouvons désormais utiliser ce jeton @keyframes unique pour n'importe quelle direction de glissement simplement en modifiant la propriété personnalisée --kf-slide-from : .barre latérale { animation : kf-slide-in 0,3s easy-out ; /* Utilise la valeur par défaut : glisse depuis la gauche */ }
.notification { animation : kf-slide-in 0,4s easy-out ; --kf-slide-from : 0 -50px ; /* glisser depuis le haut */ }
.modal { animations : kf-fondu entrant 0,5 s, kf-slide-in 0,5s cube-bézier (0,34, 1,56, 0,64, 1); --kf-slide-from : 50px 50px ; /* slide depuis le coin inférieur droit */ }
Cette approche nous offre une flexibilité incroyable tout en conservant une cohérence. Une déclaration d'image clé, des possibilités infinies. Voir les jetons Pen Keyframes - Démo 3 [forked] par Amit Sheen. Et si nous voulons rendre nos animations encore plus flexibles, en permettant également des effets « coulissants », nous pouvonsajoutez simplement une propriété personnalisée --kf-slide-to, similaire à ce que nous verrons dans la section suivante. Images clés du zoom bidirectionnel Une autre animation courante qui est dupliquée dans les projets est celle des effets de « zoom ». Qu'il s'agisse d'une augmentation subtile des messages toast, d'un zoom avant spectaculaire pour les modaux ou d'un léger effet de réduction pour les titres, les animations de zoom sont partout. Au lieu de créer des images clés distinctes pour chaque valeur d'échelle, créons un ensemble flexible d'images clés kf-zoom :
/* * Zoom - animation à l'échelle * Utilisez --kf-zoom-from et --kf-zoom-to pour contrôler les valeurs d'échelle * Par défaut : zoome de 80 % à 100 % (0,8 à 1) * Utilisation : * animation : sortie facilité kf-zoom 0,2 s ; * --kf-zoom-from : 0,5 ; --kf-zoom-to : 1 ; // zoom de 50% à 100% * --kf-zoom-from : 1 ; --kf-zoom-to : 0 ; // zoom de 100% à 0% * --kf-zoom-from : 1 ; --kf-zoom-to : 1.1 ; // zoom de 100% à 110% */
@keyframes kf-zoom { de { échelle : var(--kf-zoom-from, 0,8); } à { échelle : var(--kf-zoom-to, 1); } }
Avec une seule définition, nous pouvons obtenir n’importe quelle variation de zoom dont nous avons besoin : .toast { animations : kf-glissable 0,2 s, kf-zoom 0,4 s de sortie facilitée ; --kf-slide-from : 0 100 % ; /* glisser depuis le haut */ /* Utilise le zoom par défaut : évolue de 80 % à 100 % */ }
.modal { animation : kf-zoom 0,3s cube-bézier(0,34, 1,56, 0,64, 1) ; --kf-zoom-from : 0 ; /* zoom spectaculaire de 0% à 100% */ }
.titre { animations : kf-fade-in 2s, kf-zoom 2s facilité d'entrée ; --kf-zoom-from : 1.2 ; --kf-zoom-to : 0,8 ; /* réduction douce */ }
La valeur par défaut de 0,8 (80 %) fonctionne parfaitement pour la plupart des éléments de l'interface utilisateur, comme les messages toasts et les cartes, tout en restant facile à personnaliser pour des cas particuliers. Voir les jetons Pen Keyframes - Démo 4 [forked] par Amit Sheen. Vous avez peut-être remarqué quelque chose d'intéressant dans les exemples récents : nous avons combiné des animations. L’un des principaux avantages de travailler avec les jetons @keyframes est qu’ils sont conçus pour s’intégrer de manière transparente les uns aux autres. Cette composition douce est intentionnelle et non accidentelle. Nous discuterons plus en détail de la composition des animations plus tard, notamment là où elles peuvent devenir problématiques, mais la plupart des combinaisons sont simples et faciles à mettre en œuvre. Remarque : en écrivant cet article, et peut-être à cause de sa rédaction, je me suis retrouvé à repenser toute l'idée des animations d'entrée. Avec toutes les avancées récentes en matière de CSS, en avons-nous encore besoin ? Heureusement, Adam Argyle a exploré les mêmes questions et les a exprimées avec brio dans son blog. Cela ne contredit pas ce qui est écrit ici, mais cela présente une approche à considérer, surtout si vos projets reposent fortement sur des animations d’entrée. Animations continues Alors que les animations d'entrée, telles que « fondu », « glissement » et « zoom », se produisent une fois puis s'arrêtent, les animations continues bouclent indéfiniment pour attirer l'attention ou indiquer une activité en cours. Les deux animations continues les plus courantes que je rencontre sont « spin » (pour les indicateurs de chargement) et « pulse » (pour mettre en évidence les éléments importants). Ces animations présentent des défis uniques lorsqu'il s'agit de créer des jetons d'images clés. Contrairement aux animations d’entrée qui passent généralement d’un état à un autre, les animations continues doivent être hautement personnalisables dans leurs modèles de comportement. Le docteur en spin Chaque projet semble utiliser plusieurs animations de rotation. Certains tournent dans le sens des aiguilles d’une montre, d’autres dans le sens inverse. Certains effectuent une seule rotation à 360 degrés, d’autres effectuent plusieurs tours pour un effet plus rapide. Au lieu de créer des images clés distinctes pour chaque variante, créons une version flexible qui gère tous les scénarios :
/* * Spin - animation de rotation * Utilisez --kf-spin-from et --kf-spin-to pour contrôler la plage de rotation * Utilisez --kf-spin-turns pour contrôler la quantité de rotation * Par défaut : pivote de 0 deg à 360 deg (1 rotation complète) * Utilisation : * animation : kf-spin 1s linéaire infini ; * --kf-spin-tours : 2 ; // 2 rotations complètes * --kf-spin-from : 0deg ; --kf-spin-to : 180 deg ; // demi-rotation * --kf-spin-from : 0deg ; --kf-spin-to : -360deg ; // dans le sens inverse des aiguilles d'une montre */
@keyframes kf-spin { de { rotation : var(--kf-spin-from, 0deg); } à { faire pivoter : calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Nous pouvons maintenant créer n’importe quelle variation de rotation que nous aimons :
.loading-spinner { animation : kf-spin 1s linéaire infini ; /* Utilise la valeur par défaut : pivote de 0 deg à 360 deg */ }
.chargeur rapide { animation : kf-spin 1.2s, alternative infinie, facilité d'entrée et de sortie ; --kf-spin-tours : 3 ; /* 3 rotations complètes pour chaque direction par cycle*/ }
.steped-reverse { animation : kf-spin 1,5 s pas (8) infini ; --kf-spin-to : -360deg ; /* dans le sens inverse des aiguilles d'une montre */ }
.subtle-wiggle { animation : kf-spin 2s, alternative infinie et facile à entrer ; --kf-spin-from : -16deg ; --kf-spin-to : 32 deg ; /* Wiggle 36 deg : entre -18deg et +18deg */ }
Voir les jetons Pen Keyframes - Démo 5 [forked] par Amit Sheen. La beauté de cette approche est que les mêmes images clés fonctionnent pour le chargement des spinners, la rotation des icônes, les effets de mouvement et même les animations multi-tours complexes. Le paradoxe du pouls Les animations par impulsions sont plus délicates car elles peuvent « pulser » différentes propriétés. Certains pulsent l'échelle, d'autres pulsent l'opacité et certaines propriétés de couleur pulsent comme la luminosité ou la saturation. Plutôt que de créer des images clés distinctes pour chaque propriété, nous pouvons créer des images clés qui fonctionnent avec n'importe quelle propriété CSS. Voici un exemple d'image clé d'impulsion avec des options d'échelle et d'opacité :
/* * Impulsion - animation pulsée * Utilisez --kf-pulse-scale-from et --kf-pulse-scale-to pour contrôler la plage d'échelle * Utilisez --kf-pulse-opacity-from et --kf-pulse-opacity-to pour contrôler la plage d'opacité. * Par défaut : pas d'impulsion (toutes les valeurs 1) * Utilisation : * animation : alternative infinie facilité d'entrée et de sortie de kf-pulse 2s ; * --kf-pulse-scale-from : 0,95 ; --kf-pulse-scale-to : 1,05 ; // impulsion d'échelle * --kf-pulse-opacity-from : 0,7 ; --kf-pulse-opacity-to : 1 ; // impulsion d'opacité */
@keyframes kf-impulsion { de { échelle : var(--kf-pulse-scale-from, 1); opacité : var(--kf-pulse-opacity-from, 1); } à { échelle : var(--kf-pulse-scale-to, 1); opacité : var(--kf-pulse-opacity-to, 1); } }
Cela crée une impulsion flexible qui peut animer plusieurs propriétés : .appel à l'action { animation : kf-pulse 0,6 s alterné infini ; --kf-pulse-opacity-from : 0,5 ; /* impulsion d'opacité */ }
.notification-dot { animation : kf-pulse 0,6 s, alternance infinie, facilité d'entrée et de sortie ; --kf-pulse-scale-from : 0,9 ; --kf-pulse-scale-to : 1,1 ; /* impulsion d'échelle */ }
.text-highlight { animation : kf-pulse 1,5 s avec sortie infinie ; --kf-pulse-scale-from : 0,8 ; --kf-pulse-opacity-from : 0,2 ; /* impulsion d'échelle et d'opacité */ }
Voir les jetons Pen Keyframes - Démo 6 [forked] par Amit Sheen. Cette image clé à impulsion kf unique peut tout gérer, des captations subtiles de l'attention aux reflets spectaculaires, tout en étant facile à personnaliser. Assouplissement avancé L'un des avantages de l'utilisation des jetons d'images clés est la facilité avec laquelle nous pouvons étendre notre bibliothèque d'animations et fournir des effets que la plupart des développeurs ne prendraient pas la peine d'écrire à partir de zéro, comme l'élasticité ou le rebond. Voici un exemple de jeton d'images clés « rebond » simple qui utilise une propriété personnalisée --kf-bounce-from pour contrôler la hauteur du saut. /* * Bounce - animation d'entrée rebondissante * Utilisez --kf-bounce-from pour contrôler la hauteur du saut * Par défaut : saute à partir de 100 vh (hors écran) * Utilisation : * animation : kf-bounce 3s easy-in ; * --kf-bounce-from : 200px ; // saute d'une hauteur de 200px */
@keyframes kf-bounce { 0% { traduire : 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { traduire : 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { traduire : 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { traduire : 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { traduire : 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94 % { traduire : 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99 % { traduire : 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
22 %, 45 %, 64 %, 79 %, 90 %, 97 %, 100 % { traduire : 0 0 ; fonction de synchronisation d'animation : facilité de sortie ; } }
Les animations comme « élastiques » sont un peu plus délicates en raison des calculs à l'intérieur des images clés. Nous devons définir --kf-elastic-from-X et --kf-elastic-from-Y séparément (les deux sont facultatifs), et ensemble, ils nous permettent de créer une entrée élastique à partir de n'importe quel point de l'écran.
/* * Elastic In - animation d'entrée élastique * Utilisez --kf-elastic-from-X et --kf-elastic-from-Y pour contrôler la position de départ * Par défaut : entre en haut au centre (0, -100vh) * Utilisation : * animation : kf-elastic-in 2s facilite l'entrée et la sortie des deux ; * --kf-elastic-from-X : -50px ; * --kf-elastic-from-Y : -200px ; // entrez à partir de (-50px, -200px) */
@keyframes kf-elastic-in { 0% { traduire : calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { traduire : calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { traduire : calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { traduire : calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { traduire : calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { traduire : calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88 % { traduire : calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100 % { traduire : 0 0 ; } }
Cette approche facilite la réutilisation et la personnalisation des images clés avancées dans notre projet, simplement en modifiant une seule propriété personnalisée.
.rebond-et-zoom { animations : kf-bounce 3s facile à utiliser, kf-zoom 3s linéaire ; --kf-zoom-from : 0 ; }
.bounce-and-slide { animation-composition : ajouter ; /* Les deux animations utilisent la traduction */ animations : kf-bounce 3s facile à utiliser, kf-slide-in 3s easy-out ; --kf-slide-from : -200px ; }
.élastique-dans { animation : kf-elastic-in 2s facilite l'entrée et la sortie des deux ; }
Voir les jetons Pen Keyframes - Démo 7 [forked] par Amit Sheen. Jusqu’à présent, nous avons vu comment consolider les images clés de manière intelligente et efficace. Bien sûr, vous souhaiterez peut-être modifier les choses pour mieux répondre aux besoins de votre projet, mais nous avons couvert des exemples de plusieurs animations courantes et cas d'utilisation quotidienne. Et avec ces jetons d’images clés en place, nous disposons désormais d’éléments de base puissants pour créer des animations cohérentes et maintenables sur l’ensemble du projet. Fini les images clés dupliquées, plus de conflits de portée globale. Juste un moyen simple et pratique de répondre à tous nos besoins en animation. Mais la vraie question est la suivante : comment pouvons-nous composer ces éléments de base ensemble ? Rassembler tout cela Nous avons vu que la combinaison de jetons d’images clés de base est simple. Nous n’avons besoin de rien de spécial si ce n’est de définir la première animation, de définir la seconde, de définir les variables selon nos besoins, et c’est tout. /* Fondu entrant + slide in */ .toast { animations : kf-fondu entrant 0,4 s, kf-slide-in 0,4s cube-bézier (0,34, 1,56, 0,64, 1); --kf-slide-from : 0 40px ; }
/* Zoom avant + fondu entrant */ .modal { animations : kf-fondu entrant 0,3 s, kf-zoom 0,3s cube-bézier (0,34, 1,56, 0,64, 1); --kf-zoom-from : 0,7 ; --kf-zoom-to : 1 ; }
/* Glisser + impulsion */ .notification { animations : kf-glissable 0,5 s, kf-pulse 1,2 s, alternative infinie, facilité d'entrée et de sortie ; --kf-slide-from : -100px 0 ; --kf-pulse-scale-from : 0,95 ; --kf-pulse-scale-to : 1,05 ; }
Ces combinaisons fonctionnent à merveille car chaque animation cible une propriété différente : opacité, transformation (traduction/échelle), etc. Mais parfois, il y a des conflits, et nous devons savoir pourquoi et comment les gérer. Lorsque deux animations tentent d'animer la même propriété (par exemple, toutes deux animant l'échelle ou les deux animant l'opacité), le résultat ne sera pas celui que vous attendez. Par défaut, une seule des animations est réellement appliquée à cette propriété, qui est la dernière de la liste des animations. Il s'agit d'une limitation de la façon dont CSS gère plusieurs animations sur la même propriété. Par exemple, cela ne fonctionnera pas comme prévu car seule l'animation kf-pulse s'appliquera. .mauvais-combo { animations : kf-zoom 0,5 s vers l'avant, kf-pulse 1,2 s alternatif infini ; --kf-zoom-from : 0,5 ; --kf-zoom-to : 1.2 ; --kf-pulse-scale-from : 0,8 ; --kf-pulse-scale-to : 1,1 ; }
Ajout d'animations Le moyen le plus simple et le plus direct de gérer plusieurs animations affectant la même propriété consiste à utiliser la propriété animation-composition. Dans le dernier exemple ci-dessus, l'animation kf-pulse remplace l'animation kf-zoom, nous ne verrons donc pas le zoom initial et n'obtiendrons pas l'échelle attendue de 1,2. En définissant la composition d'animation à ajouter, nous demandons au navigateur de combiner les deux animations. Cela nous donne le résultat souhaité. .composant-deux { animation-composition : ajouter ; }
Voir les jetons Pen Keyframes - Démo 8 [forked] par Amit Sheen. Cette approche fonctionne bien dans la plupart des cas où l’on souhaite combiner des effets sur la même propriété. C'est également utile lorsque nous devons combiner des animations avec des valeurs de propriétés statiques. Par exemple, si nous avons un élément qui utilise la propriété translation pour le positionner exactement là où nous voulons, et que nous voulons ensuite l'animer avec les images clés kf-slide-in, nous obtenons un méchant saut visible sans composition d'animation. Voir les jetons Pen Keyframes - Démo 9 [forked] par Amit Sheen. Avec la composition d'animation à ajouter, l'animation est combinée en douceur avec l'existant.se transforme, de sorte que l'élément reste en place et s'anime comme prévu. Décalage d'animation Une autre façon de gérer plusieurs animations consiste à les « échelonner », c'est-à-dire à démarrer la deuxième animation légèrement après la fin de la première. Ce n'est pas une solution qui fonctionne dans tous les cas, mais elle est utile lorsque l'on a une animation d'entrée suivie d'une animation continue. /* fondu entrant + impulsion d'opacité */ .notification { animations : kf-fade-in 2s facilité de sortie, kf-pulse 0,5 s 2 s, entrée-sortie alternative infinie ; --kf-pulse-opacity-to : 0,5 ; }
Voir les jetons Pen Keyframes - Démo 10 [forked] par Amit Sheen. La commande compte Une grande partie des animations avec lesquelles nous travaillons utilisent la propriété transform. Dans la plupart des cas, c’est tout simplement plus pratique. Il présente également un avantage en termes de performances, car les animations de transformation peuvent être accélérées par GPU. Mais si nous utilisons des transformations, nous devons accepter que l’ordre dans lequel nous effectuons nos transformations compte. Beaucoup. Jusqu’à présent, dans nos images clés, nous avons utilisé des transformations individuelles. Selon les spécifications, ceux-ci sont toujours appliqués dans un ordre fixe : d'abord, l'élément est traduit, puis pivoté, puis mis à l'échelle. Cela est logique et c’est ce à quoi la plupart d’entre nous s’attendent. Cependant, si nous utilisons la propriété transform, l’ordre dans lequel les fonctions sont écrites est l’ordre dans lequel elles sont appliquées. Dans ce cas, si nous déplaçons quelque chose de 100 pixels sur l’axe X puis le faisons pivoter de 45 degrés, ce n’est pas la même chose que de le faire d’abord pivoter de 45 degrés puis de le déplacer de 100 pixels. /* Carré rose : Traduire d'abord, puis faire pivoter */ .exemple-un { transformer : traduireX(100px) rotation(45deg); }
/* Carré vert : faites d'abord pivoter, puis traduisez */ .exemple-deux { transformation : rotation (45 degrés) translationX (100 px ); }
Voir les jetons Pen Keyframes - Démo 11 [forked] par Amit Sheen. Mais selon l'ordre de transformation, toutes les transformations individuelles (tout ce que nous avons utilisé pour les jetons d'images clés) se produisent avant les fonctions de transformation. Cela signifie que tout ce que vous définissez dans la propriété transform se produira après les animations. Mais si vous définissez, par exemple, la traduction avec les images clés kf-spin, la traduction aura lieu avant l'animation. Encore confus ?! Cela conduit à des situations où les valeurs statiques peuvent entraîner des résultats différents pour la même animation, comme dans le cas suivant :
/* Animation commune aux deux spinners */ .spinner { animation : kf-spin 1s linéaire infini ; }
/* Spinner rose : translation avant rotation (transformation individuelle) */ .spinner-rose { traduire : 100 % 50 % ; }
/* Spinner vert : rotation puis translation (ordre des fonctions) */ .spinner-vert { transformer : traduire (100 %, 50 %); }
Voir les jetons Pen Keyframes - Démo 12 [forked] par Amit Sheen. Vous pouvez voir que le premier spinner (rose) obtient une translation qui se produit avant la rotation de kf-spin, donc il se déplace d'abord à sa place puis tourne. Le deuxième spinner (vert) obtient une fonction translate() qui se produit après la transformation individuelle, de sorte que l'élément tourne d'abord, puis se déplace par rapport à son angle actuel, et nous obtenons cet effet d'orbite large. Non, ce n'est pas un bug. C'est juste une de ces choses que nous devons savoir sur CSS et garder à l'esprit lorsque nous travaillons avec plusieurs animations ou plusieurs transformations. Si nécessaire, vous pouvez également créer un ensemble supplémentaire d'images clés kf-spin-alt qui font pivoter les éléments à l'aide de la fonction rotate(). Mouvement réduit Et même si nous parlons d’images clés alternatives, nous ne pouvons ignorer l’option « pas d’animation ». L’un des plus grands avantages de l’utilisation de jetons d’images clés est que l’accessibilité peut être intégrée, et c’est en fait assez facile à faire. En concevant nos images clés en tenant compte de l'accessibilité, nous pouvons garantir que les utilisateurs qui préfèrent réduire les mouvements bénéficient d'une expérience plus fluide et moins distrayante, sans travail supplémentaire ni duplication de code. La signification exacte de « Mouvement réduit » peut changer un peu d'une animation à l'autre et d'un projet à l'autre, mais voici quelques points importants à garder à l'esprit : Images clés muettes Bien que certaines animations puissent être adoucies ou ralenties, d'autres devraient disparaître complètement lorsqu'une réduction de mouvement est demandée. Les animations d'impulsions en sont un bon exemple. Pour nous assurer que ces animations ne s'exécutent pas en mode mouvement réduit, nous pouvons simplement les envelopper dans la requête média appropriée.
@media (préfère le mouvement réduit : aucune préférence) { @keyfrmaes kf-pulse { de { échelle : var(--kf-pulse-scale-from, 1); opacité : var(--kf-pulse-opacity-from, 1); } à { échelle : var(--kf-pulse-scale-to, 1); opacité:var(--kf-pulse-opacity-to, 1); } } }
Cela garantit que les utilisateurs qui ont défini l'option Préférences de mouvement réduit sur Réduire ne verront pas l'animation et bénéficieront d'une expérience qui correspond à leurs préférences. Entrée instantanée Il y a certaines images clés que nous ne pouvons pas simplement supprimer, comme les animations d'entrée. La valeur doit changer, doit s'animer ; sinon, l'élément n'aura pas les valeurs correctes. Mais en mouvement réduit, cette transition par rapport à la valeur initiale devrait être instantanée. Pour y parvenir, nous définirons un ensemble supplémentaire d’images clés dans lesquelles la valeur passe immédiatement à l’état final. Celles-ci deviennent nos images clés par défaut. Ensuite, nous ajouterons les images clés normales dans une requête multimédia pour les préférences de mouvement réduit définies sur aucune préférence, tout comme dans l'exemple précédent. /* apparaît instantanément pour réduire les mouvements */ @keyframes kf-zoom { de, à { échelle : var(--kf-zoom-to, 1); } }
@media (préfère le mouvement réduit : aucune préférence) { /* Images clés du zoom d'origine */ @keyframes kf-zoom { de { échelle : var(--kf-zoom-from, 0,8); } à { échelle : var(--kf-zoom-to, 1); } } }
De cette façon, les utilisateurs qui préfèrent un mouvement réduit verront l'élément apparaître instantanément dans son état final, tandis que tous les autres bénéficieront de la transition animée. L'approche douce Il y a des cas où nous souhaitons conserver un peu de mouvement, mais beaucoup plus doux et calme que l'animation originale. Par exemple, nous pouvons remplacer une entrée rebondissante par un léger fondu entrant.
@keyframes kf-bounce { /* Fondu doux pour réduire les mouvements */ }
@media (préfère le mouvement réduit : aucune préférence) { @keyframes kf-bounce { /* Images clés de rebond d'origine */ } }
Désormais, les utilisateurs bénéficiant de la réduction des mouvements ont toujours une impression d'apparence, mais sans le mouvement intense d'un rebond ou d'une animation élastique. Une fois les éléments de base en place, la question suivante est de savoir comment les intégrer au flux de travail réel. Écrire des images clés flexibles est une chose, mais les rendre fiables dans un grand projet nécessite quelques stratégies que j'ai dû apprendre à mes dépens. Stratégies de mise en œuvre et meilleures pratiques Une fois que nous disposons d’une solide bibliothèque de jetons d’images clés, le véritable défi est de savoir comment les intégrer au travail quotidien.
La tentation est de supprimer toutes les images clés en même temps et de déclarer le problème résolu, mais en pratique, j'ai constaté que les meilleurs résultats proviennent d'une adoption progressive. Commencez par les animations les plus courantes, telles que le fondu ou le glissement. Ce sont des gains faciles qui montrent une valeur immédiate sans nécessiter de grosses réécritures. La dénomination est un autre point qui mérite attention. Un préfixe ou un espace de noms cohérent indique clairement quelles animations sont des jetons et lesquelles sont ponctuelles locales. Il évite également les collisions accidentelles et aide les nouveaux membres de l'équipe à reconnaître le système partagé en un coup d'œil. La documentation est tout aussi importante que le code lui-même. Même un court commentaire au-dessus de chaque jeton d'images clés peut vous éviter des heures de devinettes plus tard. Un développeur doit pouvoir ouvrir le fichier de jetons, rechercher l'effet dont il a besoin et copier le modèle d'utilisation directement dans son composant. La flexibilité est ce qui fait que cette approche en vaut la peine. En exposant des propriétés personnalisées sensibles, nous donnons aux équipes la possibilité d'adapter l'animation sans casser le système. En même temps, essayez de ne pas trop compliquer. Fournissez les boutons qui comptent et gardez le reste opiniâtre. Enfin, n’oubliez pas l’accessibilité. Toutes les animations ne nécessitent pas une alternative à mouvement réduit, mais beaucoup le font. Intégrer ces ajustements dès le début signifie que nous n'aurons jamais à les moderniser plus tard, et cela montre un niveau de soin que nos utilisateurs remarqueront même s'ils n'en parlent jamais.
D'après mon expérience, le fait de traiter les jetons d'images clés dans le cadre de notre flux de travail de conception de jetons est ce qui les rend fidèles. Une fois en place, ils cessent de ressembler à des effets spéciaux et deviennent partie intégrante du langage de conception, une extension naturelle de la façon dont le produit bouge et réagit. Conclusion Les animations peuvent être l’un des éléments les plus joyeux de la création d’interfaces, mais sans structure, elles peuvent également devenir l’une des plus grandes sources de frustration. En traitant les images clés comme des jetons, vous prenez quelque chose qui est généralement compliqué et difficile à gérer et vous le transformez en un système clair et prévisible. La vraie valeur ne réside pas seulement dans la sauvegarde de quelques lignes de code. Vous avez la certitude que lorsque vous utilisez un fondu, un glissement, un zoom ou une rotation, vous savez exactement comment il se comportera tout au long du projet. C'est la flexibilité offerte par les propriétés personnalisées, sans le chaos des variations infinies. Et c'est dans l'accessibilité intégrée à la fondation plutôt que ajoutée commeune réflexion après coup. J'ai vu ces idées fonctionner dans différentes équipes et différentes bases de code, et le modèle est toujours le même. Une fois les jetons en place, les images clés cessent d’être une collection dispersée d’astuces et font désormais partie du langage de conception. Ils rendent le produit plus intentionnel, plus cohérent et plus vivant. Si vous retenez une chose de cet article, que ce soit celle-ci : les animations méritent le même soin et la même structure que nous accordons déjà aux couleurs, à la typographie et à l'espacement. Un petit investissement dans des jetons d’images clés s’avère rentable à chaque fois que votre interface bouge.
