Les animations sur Internet ne sont pas nouvelles. Ils ont été utilisés pour atteindre de nombreux objectifs, notamment pour rendre quelque chose de plus intéressant à regarder ou encore plus attrayant. C'est parfois ce qui permet à un site Web de se démarquer de la concurrence !
Les animations peuvent faire ressembler les éléments de l'interface utilisateur au monde réel, en les faisant évoluer en douceur tout en donnant une sensation de continuité, d'action et de progression, au lieu de changer en un clin d'œil.
Même appliquées à de petits éléments, les animations peuvent aider l'utilisateur à se rappeler si une action a été exécutée ou non. En fait, l'utilisateur est plus susceptible de se souvenir de ce qu'il vient de faire après avoir perçu quelque chose qui change petit à petit, plutôt que tout à la fois. Une simple animation pour un écran de chargement en dit plus que simplement attendre avec une page blanche. C'est la différence entre savoir que quelque chose se passe encore et se demander si la page est cassée.
Il existe de nombreuses manières de réaliser une animation sur une page Web. Vous pouvez utiliser une animation prédéfinie à partir d'un fichier .gif et l'utiliser comme une image normale, ce qui peut être simple mais vous fera perdre la possibilité de modifier cette animation dans le code. Manipuler des éléments HTML à l'aide de JavaScript est une chose qui peut également être faite, mais cela coûte souvent un peu trop cher en termes de calcul. N'hésitez pas non plus à utiliser le CSS et définir plusieurs styles d'un élément pour lisser changer au fil du temps. Cela sera non seulement plus facile, mais permettra également au navigateur d'optimiser les performances et l'efficacité.
CSS propose deux types d'animations différents. Le premier est le propriété de transition, qui est fréquemment utilisé pour les effets de survol et autres interactions utilisateur. Le second est le propriété d'animation, qui permet de créer des animations plus continues ou, comme nous le verrons plus loin, des animations avec plus d'étapes. Consultez l'exemple des effets de ces deux propriétés sur le codepen ci-dessous (si vous ne savez pas ce qu'est le codepen, vérifiez notre article sur cet excellent outil pour partager des extraits de code) :
Voir le stylo types d'animations par Patrícia Silva (@patsilva_tese) sur Code Pen.
Pour réaliser des animations CSS simples ou plus complexes, il est nécessaire de maîtriser deux éléments clés : Chronologie de l'animation et Composants intérieurs. Une animation sans temps est la même chose qu'une animation sans animation, car elle changera instantanément. L'utilisation de composants internes vous facilitera la vie car il est beaucoup plus probable qu'il faille plus d'un élément pour améliorer les animations. Vérifions-les :
Pour créer une animation ou une transition fluide, il est essentiel de définir des limites de temps. Sur les deux transition et animation propriétés, nous avons durée, qui indique le temps qu'il faut pour aller du début à la fin, qui est défini par la première unité de temps (secondes ou millisecondes). Ensuite, le retard, qui détermine le temps que l'élément attendra avant que l'animation ne commence, étant défini par la deuxième unité de temps.
Vous trouverez ci-dessous quatre exemples illustrant les multiples effets que différentes valeurs peuvent créer : deux effets de survol (l'un d'une durée de 0 sec et l'autre de 0,5 sec), ainsi que deux effets de chargement (l'un avec un délai de 0 sec et l'autre avec 0,1 sec, 0,2 sec et 0,3 sec pour chacun des carrés).
Voir le stylo chronométrage des animations par Patrícia Silva (@patsilva_tese) sur Code Pen.
Le deuxième facteur clé et le secret pour créer des animations plus sophistiquées est l'utilisation de composants internes. Si seulement un ou deux éléments supplémentaires sont nécessaires, : avant et :après les composants peuvent être utilisés, comme dans l'exemple ci-dessous.
Ils peuvent être stylisés comme d'habitude sur votre fichier CSS, mais il ne sera pas nécessaire de les définir dans le code HTML. Il associera automatiquement les éléments supplémentaires au composant principal, en laissant le code HTML intact. La seule différence dans le CSS est que vous devez définir contenu de la propriété représenté par une chaîne. Par exemple, c'est comme décrire le texte d'un div dans le code HTML. À partir de l'exemple de l'effet de survol, vérifiez ci-dessous comment le composant:before a été stylisé et comment une chaîne vide a été utilisée dans la propriété content pour créer uniquement ce petit coin.
Si l'animation nécessite plus de deux éléments supplémentaires, standard composants HTML peut être utilisé. Modifiez la structure HTML et intégrez des composants non stylisés tels que des spans, appliquez un style, puis appliquez la transition ou l'animation. L'utilisation de plusieurs composants est également utile si vous effectuez différents types de mouvements à la fois. chaque composant ne peut effectuer qu'une seule animation ou transition à la fois. L'exemple ci-dessous montre l'effet de chargement : il y a un div nommé container avec quatre travées à l'intérieur, et le conteneur possède une animation qui l'agrandit. Enfin, chaque travée possède une animation qui la fait pivoter.
Alors, comment mettre en œuvre une transition ? La première chose à faire est de définir un style/état initial et final des éléments impliqués, y compris les composants:before et:after. Ensuite, à l'aide du propriété de transition, il indiquera à ces composants comment ils se comporteront entre les deux états. Cette propriété de transition est la composition de quatre autres propriétés : délai de transition et durée de la transition (qui sont des propriétés liées au temps et que nous avons déjà abordées), propriété de transition et fonction de chronométrage de transition.
Voir le stylo propriété de transition par Patrícia Silva (@patsilva_tese) sur Code Pen.
Voyons quelles sont ces deux dernières propriétés et comment elles fonctionnent :
Cette partie de la transition permet de spécifier quelles propriétés vont être affectées. Il peut être réglé sur « tout », de sorte que toutes les propriétés qui changent d'un style à l'autre sont sélectionnées. Mais il peut également s'agir d'une propriété spécifique ou d'un ensemble de propriétés. Ceci est très utile lorsque vous définissez des temporisations ou des comportements différents entre les différentes propriétés de l'élément. Par exemple, si vous souhaitez que la couleur de fond change beaucoup plus rapidement que la couleur du texte, vous devez utiliser :
La fonction de synchronisation définit la vitesse de la transition et possède un ensemble de valeurs possibles :
Découvrez comment ces différentes valeurs peuvent affecter une animation dans l'exemple ci-dessous. Notez que la transition peut se suivre d'elle-même. Si vous déplacez rapidement la souris dans et hors du composant animé, l'animation n'ira pas jusqu'à la fin : elle sera rétablie.
Voir le stylo valeurs possibles de la fonction de synchronisation de transition par Patrícia Silva (@patsilva_tese) sur Code Pen.
Contrairement à la propriété de transition, il n'est pas nécessaire de spécifier les propriétés de l'élément concerné, ni même de définir un état initial et un dernier état sur l'animation. La propriété d'animation donne plus de liberté en raison de l'utilisation des images clés. Images clés déterminer les différents styles/états du composant, en ayant un nom qui sera utilisé ultérieurement sur la propriété d'animation. N'ayant que deux états, il peut être utilisé « de » et « à » pour définir les valeurs initiale et finale. Mais, si vous en voulez plus, vous pouvez utiliser des pourcentages et spécifier quelque chose comme l'animation de rotation sur l'effet de chargement.
Tout comme la propriété de transition, celle d'animation est également la composition d'autres propriétés. Ils sont les suivants : durée de l'animation, retard d'animation et fonction de chronométrage d'animation, qui fonctionnent de la même manière que les systèmes de transition ; nom de l'animation, où le nom de l'image-clé apparaît ; nombre d'itérations d'animations, pour déterminer combien de fois l'animation sera exécutée, qui peut être un nombre spécifique « infini » ; direction d'animation et mode de remplissage d'animation.
Cette propriété indique dans quelle direction l'animation doit être affichée sur l'image-clé sélectionnée, ce qui permet de choisir l'une des valeurs suivantes :
Voir le stylo direction d'animation par Patrícia Silva (@patsilva_tese) sur Code Pen.
Vous vous demandez ce qu'il advient du composant une fois l'animation terminée ? La propriété animation-fill-mode a la réponse à cette question. Cette valeur indique comment le composant peut se comporter en dehors de la durée de l'animation, c'est-à-dire avant et après l'animation :
Vérifiez le résultat de chaque valeur ci-dessous. Cliquez simplement sur l'une des cases où l'animation a un retard d'une seconde et les différences seront claires.
Voir le stylo JJKBDee par Patrícia Silva (@patsilva_tese) sur Code Pen.
Les propriétés des éléments des deux types d'animations peuvent presque être modifiées, à condition qu'elles soient représenté par des valeurs unitaires. Par exemple, vous pourrez constater une transition en douceur sur les couleurs, les valeurs de hauteur et de largeur, les marges et les remplissages, les opacités, les transformations, etc. Cependant, vous ne verrez pas cet effet sur le style des bordures, leur position, leur caractère flottant, background img, font-family, etc.
Même si les propriétés unitaires/numériques peuvent être modifiées facilement, elles n'ont pas toutes le même impact sur le processus de rendu ; certaines peuvent être légèrement plus lourdes que d'autres. Lorsqu'un navigateur lance une page Web, il passe par certaines étapes : la première est Disposition, le second est Peindre, et enfin, le Composite. Si nous choisissons d'animer une propriété qui déclenche la mise en page, comme la largeur, le navigateur répètera la peinture et le composite. Pour cette raison, l'utilisation de propriétés qui activent uniquement l'étape composite, comme transformer et opacité devrait être une priorité. Vous pouvez consulter les liste complète des propriétés CSS et de leurs déclencheurs.
Comme mentionné précédemment, la propriété transform est l'une des moins coûteuses à animer. Cependant, cela ne signifie pas qu'il s'agit d'une propriété limitée. En fait, cela permet de faire beaucoup de choses à l'élément, notamment :
Tous les effets précédents seront appliqués au centre de l'élément à moins que la valeur de la propriété transform-origin ne soit modifiée. Cette valeur peut être de 1 ou 2 pourcentages ou même des valeurs suivantes : haut, bas, droite, gauche et centre.
Si vous avez essayé d'explorer le code de certains animations précédentes montré ici, vous remarquerez peut-être que nous sommes ne pas utiliser la propriété transform tout le temps. Cependant, cela ne signifie pas que vous ne pouvez pas faire les mêmes animations en utilisant uniquement des transformations. Pour le montrer, nous avons créé les deux effets à l'aide de la propriété transform. Consultez ci-dessous toutes les modifications nécessaires ; vous serez surpris de voir à quel point il est facile d'obtenir le même effet sans modifier la structure HTML.
Voir le stylo animations précédentes utilisant la transformation par Patrícia Silva (@patsilva_tese) sur Code Pen.
Animations réalisées via JavaScript sont gérés sur fil principal du navigateur où la mise en page et la peinture se produisent également. CSS les animations, en fonction des propriétés en cours de modification, peuvent se produire dans un thread distinct appelé fil de composition. Si le navigateur met plus de temps à effectuer des tâches plus exigeantes, les animations du fil principal seront compromises et interrompues, tandis que celles du compositeur ne seront pas affectées et continueront à fonctionner correctement. Ainsi, si vous choisissez Javascript, vous êtes plus susceptible d'avoir des images manquantes dans vos animations.
En résumé, la création d'animations à l'aide du CSS et de la propriété transform devrait être une priorité. Elles sont faciles à réaliser, surtout pour ceux qui ont déjà pris les choses en main et qui connaissent précisément les objectifs à atteindre. Néanmoins, il est important de faire attention à l'utilisation excessive de l'animation, car elle peut entraîner des problèmes de performances et créer une situation accablante pour l'utilisateur.
Développeur web avec un amour particulier pour le front-end. Mère de chats. J'essaie de contribuer à sauver la planète pendant mon temps libre en partageant des alternatives écologiques.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
