Donnez vie à vos pages Web avec des animations et des transitions CSS

Les conceptions de sites Web évoluent constamment. Qu’il s’agisse d’un design réactif, d’une belle typographie, de schémas de codage de couleurs parfaits, d’illustrations, les créateurs de sites Web proposent chaque jour de nouvelles idées et de nouveaux designs.

De nos jours, les utilisateurs attendent beaucoup des interfaces utilisateur en raison du contenu de haute qualité disponible sur Internet. Au fur et à mesure que les interfaces du site Web évoluent, la technologie sous-jacente évolue également. CSS est l’un des principaux composants responsables de l’amélioration de l’interface du site Web .

Les feuilles de style CSS ou Cascading sont chargées de rendre les sites beaucoup plus interactifs en définissant leur style, leur mise en page, leurs conceptions. La dernière norme CSS, c’est-à-dire CSS3, a introduit le concept d’ animations et de transformations qui améliorent l’expérience utilisateur en ajoutant une profondeur supplémentaire à l’interface utilisateur. Avec les animations et les transitions CSS, vous pouvez raconter des histoires, créer des effets somptueux et rendre l’interaction de l’utilisateur avec votre site Web beaucoup plus efficace et significative.

Une animation n’est qu’une simulation de mouvement qui est créée en affichant une série d’objets comme des images l’un après l’autre. La transition, en revanche, est essentiellement un processus dans lequel un objet passe d’un état à un autre. Mais, lorsque nous parlons d’animations Web, il existe essentiellement trois types – les animations CSS ou les animations d’images clés, les transitions CSS et les animations JavaScript.

Animation CSS

Pour créer des animations en CSS, nous devons modifier les propriétés CSS d’un élément tel qu’une image ou un texte, pendant une certaine période de temps. Nous pouvons modifier les propriétés des éléments autant de fois que nous le souhaitons et pouvons également définir la durée de l’animation.

Spécifier @keyframes

Les animations CSS sont définies peu avec des images clés. Ces images clés sont les points intermédiaires de l’animation. Toutes les animations CSS sont spécifiées sous la règle @keyframes. Ces images clés spécifient ce qui arrive à l’élément à un moment donné, c’est-à-dire

• quelles propriétés changent
• lorsque l’élément s’anime
• comment l’élément s’anime

Vous pouvez définir votre propre image clé comme :

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Ici, ‘to’ et ‘from’ spécifient le début et la fin de l’animation. Nous pouvons également spécifier des animations pour les moments intermédiaires entre le début et la fin comme ceci :

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Ici, 0 % représente le début de l’animation, 100 % représente la fin de l’animation et 50 % signifie le changement entre le début et la fin. Mais comment dire au navigateur pendant combien de temps l’animation doit avoir lieu ? Nous le faisons à l’aide de certaines propriétés d’animation. Ces propriétés d’animation sont associées à l’élément à animer. Par exemple:

element_name
{
animation_property: value;
style_property: value;
}

Ici, l’élément peut être n’importe quelle balise HTML telle que div, span, img, p etc. et style_propertyest n’importe quelle propriété de style CSS comme background_color, width, height etc. Examinons maintenant certaines propriétés d’animation en détail.

1. @keyframes: Les images clés sont utilisées pour spécifier le code d’animation comme indiqué ci-dessus.
2. animation-name: Le nom spécifié avec @keyframes est le nom de l’animation. Ce nom est utilisé pour référencer les images clés avec l’élément à animer.
3. animation-duration: Il est utilisé pour spécifier la durée de l’animation en secondes ou millisecondes. Par exemple, si nous le fixons à 5 secondes, l’animation ne durera que 5 secondes. Si nous ne définissons pas cette propriété, l’animation ne fonctionnera pas du tout car sa valeur par défaut est 0.
4. animation-delay: nous pouvons retarder le début de l’animation en spécifiant le délai d’animation. Par exemple, si vous souhaitez démarrer l’animation 5 secondes après le chargement de la page dans le navigateur, définissez simplement animation-delay sur 5s.
5. animation-direction: nous pouvons indiquer au navigateur si une animation se déplace dans le sens inverse ou alterne les cycles avec cette propriété. Par exemple, si vous souhaitez que l’animation s’exécute du début à la fin, définissez la valeur de animation-duration sur « normal ». Si vous voulez qu’il s’exécute de la fin au début, définissez simplement la valeur sur « inverser ».
6. animation-fill-mode: Nous pouvons spécifier le style de l’élément lorsque l’animation ne joue pas avec ce mode, c’est-à-dire lorsque l’animation est retardée ou terminée, alors quel devrait être le style de l’élément.
7. animation-iteration-count: Le nombre de fois qu’une animation peut être lue est représenté par cette propriété. Par exemple, si vous voulez lire l’animation une fois, réglez-la sur 1, ou si vous voulez que l’animation soit jouée indéfiniment, réglez-la simplement sur « infinie ».
8. animation-timing-function: Cette propriété est utilisée pour spécifier la courbe de vitesse de l’animation comme linéaire, accélération ou décélération.
9. Animation: C’est la propriété abrégée pour définir toutes les propriétés d’animation.

Par exemple, vous pouvez animer un objet rebondissant avec l’extrait de code suivant. Remarquez comment la notation abrégée pour l’animation a été utilisée ici.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Transitions

Les transitions CSS sont appliquées aux propriétés des éléments pendant une certaine durée en fonction de certaines fonctions de synchronisation, également appelées fonctions d’accélération. Par fonction de synchronisation, nous entendons une fonction qui va changer les propriétés des éléments d’un état à un autre comme la progression linéaire, l’accélération ou la décélération. Vous avez peut-être remarqué qu’une image glisse ou se transforme en une autre image au survol ou qu’un son joue au clic de la souris. Ce sont tous des effets de transition qui peuvent rendre un site Web interactif.

Les fonctions d’accélération sont importantes pour créer des transitions. Ils précisent comment les propriétés vont changer. Ils peuvent également modifier la vitesse à laquelle la valeur des propriétés change du point de départ au point final d’une transition. Vous pouvez appliquer des transitions de la manière suivante :

element
{
style_property: value;
transition_property: value;
}

Ici, l’élément spécifie l’élément HTML que vous souhaitez transformer comme div, H1, img, etc. style_property est le style CSS appliqué à cet élément. Voyons maintenant quelques propriétés de transition :

• transition-property: L’effet de transition sera toujours appliqué sur la propriété CSS d’un élément comme sa largeur, sa hauteur, sa couleur ou sa forme. La valeur de cet attribut spécifie cette propriété CSS de l’élément. L’effet de transition commencera chaque fois que cette propriété changera, par exemple au survol de la souris ou au clic.
• transition-timing-function: C’est la fonction de facilité à appliquer à l’élément. Cette propriété est utilisée pour spécifier la courbe de vitesse de transition comme l’entrée, la sortie, linéaire, etc.
• transition-duration: C’est comme la propriété animation-duration. Il est utilisé pour spécifier la durée de l’effet de transition en secondes ou millisecondes. Par exemple, si nous le réglons sur 5 secondes, la transition affectera se terminera en 5 secondes. Si nous ne définissons pas cette propriété, il n’y aura aucune transition car sa valeur par défaut est 0.
• transition-delay: Avec cette propriété, nous pouvons spécifier la durée pour retarder l’effet de transition. Par exemple, si vous souhaitez démarrer l’effet 5 secondes après le survol de la souris, réglez simplement le délai de transition sur 5 secondes.
• transition : il s’agit de la propriété abrégée permettant de définir ensemble toutes les propriétés de transition ci-dessus.

Par exemple, le code suivant modifiera la largeur de l’élément div au survol de la souris. Voir la propriété abrégée de transition appliquée ici.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animations vs Transitions

Similitudes entre les animations et les transitions

• La transition et l’animation sont utilisées pour visualiser les changements dans les propriétés d’un élément.
• Nous pouvons spécifier la durée pendant laquelle la transition et l’animation doivent avoir lieu.
• Nous avons certaines fonctions de synchronisation pour modifier le taux de passage d’une valeur à une autre pour les transitions ainsi que pour les animations.

Différences entre animations et transitions

• Les transitions CSS sont réactives. Ils doivent être déclenchés par les utilisateurs. Les animations, quant à elles, s’exécutent chaque fois que la page se charge sur le navigateur. Ils n’ont pas besoin d’être déclenchés.
• Les transitions s’exécutent une fois, puis s’arrêtent. Ensuite, nous devons les déclencher encore et encore pendant que les animations peuvent boucler. Ils peuvent démarrer sur leur propre arrêt, puis recommencer.
• Le navigateur s’occupe lui-même des transitions. Nous avons juste besoin de spécifier le début et la fin de la transition. Nous pouvons définir l’effet de transition, mais nous ne pouvons pas modifier le taux de changement d’une transition entre les deux. Par exemple, si une image glisse au survol de la souris, nous la verrons simplement apparaître ou disparaître lorsque nous la survolerons.
• Les animations, d’autre part, offrent la possibilité de modifier les propriétés entre le début et la fin. Cela se produit à l’aide d’images clés. Par exemple, nous pouvons définir la couleur d’une image en rouge pendant les 5 premières secondes, puis en bleu pendant les 5 secondes suivantes, puis en vert pendant les 5 secondes suivantes et en jaune pendant les 5 dernières secondes de l’animation. Par conséquent, nous avons un contrôle sur les animations.

Préfixes de fournisseur

Toutes les fonctionnalités CSS3 ne sont pas prises en charge par tous les navigateurs. Par conséquent, nous utilisons des préfixes le long de ces propriétés CSS pour des navigateurs spécifiques tels que -webkit- (Safari), -moz- (Firefox) ou -o- (Opera). Cela permet aux marqueurs du navigateur d’ajouter un support pour cette fonctionnalité CSS3. Ces préfixes sont appelés préfixes de fournisseur ou préfixes de navigateur CSS. Par conséquent, nous devons également mettre les préfixes du fournisseur avec les propriétés d’animation et de transition. Par exemple, considérez le code ci-dessous et voyez comment les préfixes de fournisseur pour Safari ont été utilisés :

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Pointe! Vous pouvez éviter cette agitation en utilisant des bibliothèques telles que -prefix-free. C’est une bibliothèque JavaScript qui ajoutera le préfixe du navigateur actuel à n’importe quel code CSS. Découvrez de nombreuses bibliothèques de ce type disponibles sur le Web.

Conclusion

Les développeurs de sites Web peuvent appliquer des animations et des transformations pour attirer les utilisateurs vers vos sites Web. Vous pouvez les utiliser pour améliorer les formulaires, les notifications, les graphiques d’arrière-plan, les images, les graphiques, les griffonnages, les boutons d’appel à l’action, etc. Utilisez simplement votre imagination et vous pouvez trouver un moyen d’étonner vos utilisateurs. N’oubliez pas que même un petit changement dans votre site Web peut lui donner une bien meilleure apparence et augmenter sa valeur. Alors, avez-vous déjà utilisé des animations sur votre site Web ? Partagez vos réflexions sur l’utilisation des animations et des transitions.