Comment améliorer l’interactivité de son site web grâce à l’animation et à la transition ?

#web #css #frontend #animation

Depuis l’apparition de l’internet tous les webmasters essaient de trouver de nouvelles solutions pour améliorer l’expérience des utilisateurs afin de les retenir le plus longtemps possible sur leurs sites web.
C’est pour cela qu’ils sont à l’affût de la moindre évolution technologique afin d’améliorer l’expérience utilisateur.
C’est dans ce cadre que nous allons présenter l’une des propriétés CSS qui aident à améliorer l’interactivité entre le système et l’utilisateur.

Alors comment pouvons-nous comprendre l’animation en CSS ?

L’animation en CSS consiste à donner de la réactivité à un élément inerte dans son site web, c'est un peu comme lui donner une vie, passant d'un état statique à un état dynamique.
C’est là que les transitions interviennent pour contrôler la vitesse et le temps d’exécution d’une animation appliquée à une ou plusieurs propriétés de son site web.

Et c'est quoi une transition?

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. (Source : MDN)

Il y a deux moyens de créer des animations en CSS : les transitions et les keyframes.
Les transitions sont le moyen le plus simple et le plus facile à mettre en place pour créer des animations mais elles sont limitées, contrairement aux keyframes qui sont complexes mais qui permettent des animations beaucoup plus fun et bien plus élaborées.
Pour que ça ne soit pas très complexe, dans ce post nous allons d’abord utiliser seulement la transition et peut-être les keyframes dans le post suivant.

Pour créer une animation à l'aide d'une transition, on aura besoin de plusieurs informations comme :

Une propriété CSS à modifier ;
Une valeur initiale de cette propriété ;
Une valeur finale que prendra cette propriété ;
Une durée d’animation exprimée en unité de temps ;
Un évènement pour déclencher votre transition.

On va y aller par un exemple pour illustrer la petite théorie ci-haut :

Créons d'abord deux boutons en HTML.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Animations et transitions</title>
</head>
<body>
  <h2>Exemples avec les boutons</h2>
  <div class="buttons-exercise">
    <button class="btn1">Bouton</button>
    <button class="btn2">Bouton</button>
    <button class="btn1">Bouton</button>
  </div>
</body>
</html>

Appliquons ensuite du style à ces boutons avec CSS.

.btn1{
  padding: 15px;
  border: none;
  width: 200px;
  background: #48D1CC;
  color: #242424;
  border-radius: 30px;
}

.btn2{
  padding: 15px;
  border: none;
  width: 200px;
  background: #e67e22;
  color: #242424;
  border-radius: 30px;
}

Regardons un peu l'affichage.

Vous remarquerez que le bouton central est en orange comme défini en CSS, il a été défini avec une couleur différente des autres car c'est le bouton qui va nous aider dans notre série des transitions.

Vous vous souvenez que nous avons expliqué que pour créer une animation il fallait avoir plusieurs informations?
Dans notre cas nous avons déjà un élément à modifier (notre bouton central avec comme valeur btn2) et nous connaissons déjà sa valeur initiale avec tous les styles que nous lui avons appliqués avec CSS.
Maintenant nous allons mettre en application d'autres éléments pour qu'on puisse regarder l'effet de l'animation.

cursor: pointer;
  transition-property: transform;
  transition-duration: 200ms;
  &:hover {
        background: blue;
        transform: scale(1.15);
    }

Nous avons défini la durée de notre transition par rapport au survol de la souris au dessus du bouton par l'utilisateur. Le bouton va changer de couleur en rouge avec notre code background: blue, le bouton va grossir de quelques millimètres avec le code transform: scale(1.15) car par défaut le scale est défini à 1 et enfin, après le survol de la souris, le bouton va mettre 200 millisecondes avant de revenir à son état initial.

Résultat après avoir appliquer la transformation à notre bouton

Nous avons utilisé toutes nos cinq méthodes en utilisant pour le deuxième exemple un évènement qui déclenche notre animation. Dans notre cas c'était avec l'évènement du survol de la souris avec le mot clé :hover qui est une pseudoclasse (Les pseudoclasses? Mais ce n'est pas ça notre sujet😉). Finalement l'état initial était différent de l'état final, au survol le bouton est devenu plus grand que les autres et a changé de couleur.

Parlons un peu des pseudoclasses car c'est elle qui nous permettrons dans la plus part des cas d'appliquer une animation à un élément de notre page web.

C'est quoi une pseudoclasse?

Une pseudoclasse peut être définie comme une condition qui sera lis par le navigateur pour produire, déclencher ou encore cesser un événement sur notre site. C'est un peu comme le if/else.
Comme pour notre cas nous avons donné une condition de transformer un élément à l'aide de la pseudoclasse :hover.

Il y a plusieurs pseudoclasses autres que :hover. Nous pouvons citer par exemple:

:active : activé quand l'utilisateur clique sur un élément. Souvent appliqué aux boutons et aux liens
:focus : quand un élément est sélectionné ;
:cheked : quand un élément est sélectionné dans un checkbox ou à l'aide d'un bouton radio ;
:valid : quand le input de l'utilisateur correspond au type de données voulu ;
:invalid : quand le input de l'utilisateur ne correspond pas au type de données voulu ;

Comme on vient de le voir avec les pseudoclasses, il y a plusieurs cas dans lesquels ou peut utiliser l'animation sur un site web et cela de plusieurs manières. Dans un formulaire, sur un bouton, sur un questionnaire, ...

L'animation est un outil très puissant pour créer une réactivité sur son site et ainsi améliorer l'expérience utilisateur.

Nous n'avons parler que d'une petite partie de cet outil puissant, mais il y a encore d'autres moyens qui nous permettent de créer des animations uniques, jolies et complexes, qui ressemblent parfois à des œuvres d'art.

Il ne faut pas aussi abuser avec plus d'animations sur son site, il faut seulement le faire quand c'est nécessaire.

Pour apprendre plus sur la transformation et l'animation, il y a une grande documentation sur le web :