12 conseils pour une animation CSS incroyable

(Crédit d'image: Getty)

Bien faite, l'animation CSS peut insuffler de la vie à votre site et engager vos utilisateurs sans le gonflement des bibliothèques supplémentaires. Fournir des animations réfléchies et fluides qui apportent une profondeur significative à votre site n'a pas à être difficile - les propriétés CSS modernes vous offrent désormais presque tous les outils dont vous aurez besoin pour créer des expériences mémorables pour vos utilisateurs.

Dans cet article, nous allons passer en revue quelques-uns des meilleurs conseils sur la façon de libérer toutes les capacités de l'animation CSS interactive. Pendant que vous êtes ici, vous voudrez peut-être également consulter notre liste de Exemples d'animation CSS .

Beaucoup de ces conseils font référence aux principes d'animation de Disney - et en effet, tout article décent sur la création d'animations serait négligent de ne pas les mentionner. Consultez notre article dédié sur Les 12 principes de base de l'animation de Disney pour un guide complet. Celles-ci ont été présentées dans le livre fondateur de Frank Thomas et Ollie Johnston L'illusion de la vie et constituent un excellent point de départ pour les novices en animation.

01. Tenez-vous en aux quatre propriétés fondamentales

L'animation CSS offre un moyen relativement simple de faire la transition en douceur d'un large éventail de propriétés. Les bonnes interfaces animées solides dépendent d'une expérience fluide et fluide, et à cette fin, il est préférable de fournir plus de 60 FPS (images par seconde). Pour maintenir les performances dans nos chronologies d'animation, nous souhaitons faire de notre mieux pour limiter nos propriétés animées à quatre:

  • Escalader - transformer: échelle (2)
  • Positionner - transformer: translateX (50rem)
  • Rotation - transformation: rotation (180deg)
  • Opacité - opacité: 0,5

L'animation des propriétés telles que le rayon de la bordure, les hauteurs / largeurs ou les marges affectera les méthodes de disposition du navigateur, et l'animation des arrière-plans, des couleurs ou des ombres de boîte affectera les méthodes de peinture du navigateur et réduira considérablement votre FPS. L'animation de ces propriétés peut produire des effets intéressants, mais ils doivent être utilisés avec parcimonie pour maintenir les performances.

02. Introduire la vitesse

L’un des principes fondamentaux de l’animation de Disney est le squash and stretch. Bien que cela puisse sembler un peu trop ludique pour un site Web propre et moderne, le squash et l'étirement sont des principes qui inculquent les performances perçues, c'est-à-dire que nous sommes en mesure d'inculquer un sentiment de performance de page qui pourrait ne pas correspondre exactement à nos mesures techniques. En écrasant ou en étirant des éléments en mouvement, nous leur donnons une illusion de vitesse plus ou moins grande, donnant à nouveau une sensation de fluidité authentique à notre page.

03. Choisissez le bon timing

Animation CSS: CSOui

(Crédit d'image: Adam Kuhn)

Quelle que soit la bibliothèque ou la pile que vous choisissez d'exploiter, le timing et l'assouplissement de vos animations sont essentiels pour offrir une expérience fluide qui semble naturelle et intuitive à vos utilisateurs. Heureusement, nous avons de nombreuses excellentes options intégrées directement à CSS pour vous aider à créer une sensation plus organique.

Les spécifications CSS nous offrent de très bonnes fonctions d'assouplissement natives, la plus naturelle étant facilité d'entrée , qui permet à la synchronisation de l'animation de gagner et de perdre de la vitesse lorsque l'animation commence et se termine. Mais une personnalisation plus approfondie est possible et parfois nécessaire - et en plus Bibliothèques JS ne sont pas toujours la réponse.

Entrer cubique-bezier . Il est utile de penser à la synchronisation de votre animation comme suivant une courbe verticale, comme si vous deviez faire rouler une balle vers le haut ou vers le bas d'une colline, en notant comment la vitesse change avec chaque changement de degré d'inclinaison. En utilisant la fonction cubic-bezier, nous sommes en mesure de mapper efficacement notre animation ou transition vers ces courbes, permettant même à la fois l'anticipation - la liquidation effective ou les images d'introduction de notre animation - et le suivi, qui sont les images finales. d'animation.

En accédant à ces propriétés, nous sommes en mesure de donner à notre animation une physique plus réaliste telle que l'élasticité. Pour un excellent indicateur visuel de la façon dont ces fonctions pourraient fonctionner (et pour les tester vous-même), visitez l'excellent easings.net par Andrey Sitnik. Si vous connaissez les courbes et les poignées du dessin vectoriel, vous saurez instantanément comment cubique-bezier travaux.

Étant donné que les images clés d'animation CSS contiennent généralement plusieurs segments, passant rarement directement de 1 à 100%, il est important de garder à l'esprit que toute fonction de minutage autre que linéaire s'exécutera du début à la fin de la courbe de mouvement pour chaque segment.

Exemple: les images clés d'animation sont comprises entre 0% - 25% - 75% - 100% et utilisent facilité d'entrée comme fonction de synchronisation. Cela signifie que l'animation se facilitera efficacement à trois reprises. Dans cet esprit, les fonctions de minutage d'animation peuvent également être modifiées dans les chaînes d'images clés elles-mêmes si nécessaire. Aussi capable que cubique-bezier est, parfois, il est mieux adapté aux transitions CSS. Vérifiez le CodePen ci-dessous.

04. Arrêtez et démarrez avec animation-play-state

En utilisant le état de lecture de l'animation propriété, vous pouvez facilement démarrer ou mettre en pause vos animations. Par exemple, vous voudrez peut-être arrêter une animation en survol. Pour ce faire, utilisez état de lecture de l'animation: mis en pause . Cette option offrira à vos utilisateurs un plus grand degré d'interactivité, et en tandem avec des propriétés d'animation chaînées séparées par des virgules ou quelques courtes lignes de JavaScript, nous pouvons définir exactement quand une animation doit être active.

05. Pensez à l'accessibilité

Lorsque nous travaillons à l'amélioration de notre expérience utilisateur avec l'animation, nous ne pensons souvent pas à l'accessibilité. Tout le monde ne peut pas profiter du mouvement sur le Web. Pour certains utilisateurs - tels que ceux sujets aux crises - cela pourrait potentiellement causer de graves problèmes de santé.

Heureusement, nous pouvons utiliser une requête multimédia de plus en plus bien prise en charge: préfère le mouvement réduit . Cette requête fonctionne en tandem avec les préférences du système d'exploitation d'un utilisateur, ce qui nous permet de limiter nos animations si nécessaire. Par exemple, imaginons que nous utilisions une animation particulièrement frénétique utilisée pour transmettre un sentiment d'urgence et attirer l'utilisateur vers un appel à l'action . Utilisant préfère le mouvement réduit nous pouvons garder cet élément statique.

@media (prefers-reduced-motion: reduce){ .wildlyFlailing{ animation:none; }}

Quelques points importants à garder à l'esprit: si les éléments animés utilisent un mode de remplissage d'animation qui définit un état de fin, assurez-vous que les éléments sont chargés à cet état final lorsque vous ciblez des utilisateurs sensibles au mouvement. Si un élément s'appuie sur une animation pour le déplacer vers la position de la fenêtre, nous voudrons nous assurer qu'il change de position via une animation échelonnée à deux images ou avec une transition de 0.

06. Chaîne vos animations pour un impact

L'une des fonctionnalités les plus négligées de l'animation CSS est la possibilité de chaîner vos animations. Autrement dit, nous pouvons définir chaque animation séparément via une séparation par virgule, tout en les exécutant en tandem.

Par exemple, nous pouvons créer une animation pour faire pivoter notre élément, une animation secondaire pour redimensionner sa taille d'arrière-plan et une animation tertiaire pour ajuster son opacité afin de se fondre à l'intérieur et à l'extérieur. De plus, nous pouvons appliquer des propriétés supplémentaires à ces animations, telles que des valeurs séparées par des virgules pour contrôler les délais, les fonctions de minutage, les durées ou même les états de lecture.

Bien que les animations enchaînées puissent nécessiter une bonne quantité d'ajustements pour synchroniser toutes les propriétés en mouvement, elles nous offrent également un contrôle granulaire important sur la façon dont nous choisissons de chronométrer et de faciliter chaque propriété animée, créant un mouvement complexe avec beaucoup moins de lignes de CSS. (ou éléments DOM nécessaires).

07. Utilisez will-change pour améliorer les performances

Une excellente propriété qui appartient à la boîte à outils de chaque animateur CSS est le peu connu mais très utile changera . Il y avait autrefois un certain nombre de méthodes de piratage que vous pouviez utiliser pour tromper le navigateur dans le matériel accélérant nos propriétés animées ou transférées - et elles ont en quelque sorte fonctionné. Maintenant, cependant, nous avons une propriété dédiée à exploiter; et changera peut donner un coup de pouce nécessaire à vos performances d'animation.

Bien qu'il existe des valeurs par défaut généralisées pour changera là-bas, nous voudrons généralement définir quelle propriété sera mise à jour sur quel élément - comme va changer: transformer ou, lorsqu'un chaînage est nécessaire, will-change: bord-rayon, opacité .

En termes simples, le changera propriété indique à notre navigateur que ces éléments - surprise - vont changer. En conséquence, les performances de ces éléments seront généralement priorisées et le matériel accéléré.

Soyons changera toutes les choses! Non, non, non - la surutilisation de cette propriété, ou la priorisation de tous vos éléments animés ou en transition, exercera plus de pression sur le matériel qu'elle ne compensera. N'oubliez pas, utilisé avec parcimonie et uniquement pour les animations ou les transitions qui sont essentielles à l'expérience que vous créez, changera peut vous fournir le coup de pouce dont vous avez besoin.

08. Type d'animation avec des polices variables

(Crédit d'image: Adam Kuhn)

La typographie a toujours été difficile à animer correctement. Bien sûr, nous pouvons animer la taille de la police (une propriété mieux gérée en animant l'échelle) et la couleur, mais avec l'introduction de polices variables , nous avons maintenant un tout nouvel ensemble d'options animables dans notre boîte à outils.

Pour les non-initiés, les polices variables contiennent plusieurs variations de police dans un seul fichier de police, avec des variations potentielles de poids, d'angles, de décorations et plus encore. De plus, ces variantes peuvent toutes être animées en CSS à l’aide de paramètres de variation de police . Grâce à cela, nous sommes maintenant en mesure de passer en douceur du normal à l'italique, du clair au gras ou des swashes à sans swash, le tout avec la sensation d'un SVG morphing - car à bien des égards, c'est exactement ce qui se passe ici.

09. Utilisez des variables pour garder les choses cohérentes

Un excellent moyen de maintenir la cohérence consiste à utiliser des variables CSS ou des variables de préprocesseur pour définir la synchronisation de votre animation.

:root{ timing-base: 1000;}

La définition d'une animation de base ou d'une durée de transition sans définir une unité (secondes ou millisecondes) nous offre la flexibilité d'appeler cette durée dans un calc () fonction. Bien que la durée puisse varier de notre variable CSS de base, il s'agira toujours d'une simple modification de ce nombre et de maintenir une expérience cohérente.

10. Gardez les choses naturelles avec un arc

Revenant à nouveau aux 12 principes de l'animation de Disney, nous voyons la mention de l'arc. L'arc en question fait référence au mouvement intrinsèquement circulaire dans lequel se produisent la plupart des mouvements naturels. Très rarement, dans la vie quotidienne, nous observons un mouvement en ligne droite. Et s'il est plus facile et nécessite moins d'images clés, d'animer strictement de gauche à droite ou de haut en bas, nous pouvons offrir à nos utilisateurs une expérience plus relatable en gardant cet arc à l'esprit tout en reconnaissant que certaines mises en page nous interdiront en fin de compte de animer nos éléments autour de chemins courbes (créant souvent des interférences avec d'autres éléments).

11. Lisez-le

Parfois, le meilleur moyen de vraiment avoir une idée de la façon dont les animations de votre interface se dessinent est de créer un enregistrement d'écran. Voir comment quelque chose fonctionne est évidemment un excellent moyen de vous assurer que vos animations fonctionnent comme vous le souhaitez.

Alors, comment l'auteur de cet article s'assure-t-il qu'il obtient ce qu'il veut? En tant que diffuseur de terminaux de démos CodePen, il adore créer des GIF screencap de ses animations. Composer ces GIF et les faire boucler correctement sert en fait un autre objectif. Cela lui permet de revoir les animations et de diagnostiquer les éventuels problèmes de synchronisation ou d'accélération.

12. Pensez à étaler

Lorsque vous travaillez avec des animations CSS géométriques ou basées sur des motifs en boucle, il peut souvent être utile d'étaler nos animations à l'aide de retards d'animation. Cela peut devenir problématique si l'élément est entré dans la fenêtre, mais nous demandons à l'utilisateur d'attendre que l'animation commence. Nous pouvons obtenir le même type de décalage d'animation en utilisant des retards négatifs garantissant que la chronologie de l'animation est lancée immédiatement au chargement de la page, sans temps d'attente pour l'utilisateur.

Cet article a été initialement publié dans le magazine Web Designer. Explorez tous nos articles de conception Web ici .

Générer des haut-parleurs x 4

Apprenez à créer un meilleur JavaScript chez GenerateJS(Crédit d'image: Future)

Rejoignez-nous en avril 2020 avec notre gamme de superstars JavaScript à GenerateJS - la conférence qui vous aide à créer un meilleur JavaScript. Réservez maintenant à generateconf.com

Lire la suite: