La propriété CSS "animation" va de pair avec les keyframes. Une animation est similaire à une transition. La différence réside surtout dans le fait qu'une animation va souvent être utilisé pour des animations plus complexes que, par exemple, simplement un changement de couleur.

Et généralement, là où une "transition" va surtout être utilisé lors du survol d'un élément, une animation peut être utilisé sans demander à l'utilisateur d'effectuer quoique ce soit.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animation</title>

    <style>    
      .monAnimation {
        animation: myAnim 5s linear 0s infinite;
        background-color: rgb(220, 127, 127);
        width: 50vh;
        height: 50vh;
      }

      @keyframes myAnim {
        0%,
        50%,
        100% {
          opacity: 1;
        }

        25%,
        75% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
        <div class="monAnimation"></div>
    </body>
</html>

Dans cet exemple, mon bloc div va osciller entre l'opacité 0 et 1. Une animation ne peut fonctionner sans keyframes et vous remarquerez que la syntaxe d'une keyframes est similaire aux medias queries. Il vous est possible de définir vos keyframes n'importe où dans votre code.

Vous devrez alors définir un nom pour votre keyframe, ici "myAnim" et ce nom sera repris dans la propriété CSS "animation". Ensuite, il faut voir le reste comme une ligne du temps. Nous commençons par lui dire qu'à 0% du temps (au début de l'animation), l'opacité sera de 1 et donc, que le bloc sera totalement visible au chargement de l'animation. On garantit l'état de l'opacité à la moitié du temps et à la fin.

Dans un second temps, nous définissons qu'au quart et au trois-quart du temps, l'opacité sera inversée. Ainsi, dans l'ordre : 0% - Opacity:1; 25% - Opacity:0; 50% - Opacity:1; 75% - Opacity:0; 100% - Opacity:1;

Le temps total de votre animation sera quand à lui, définis dans la propriété "animation". Ici, il s'agit de 5 secondes. les propriétés suivantes sont expliquées ci-dessous.

La propriété "animation" accepte plusieurs valeurs, qui permettent de définir la durée de l'animation, la courbe de transition, le nombre de répétitions et autres paramètres importants de l'animation.


 .element {
    animation: myAnim 5s linear 0s infinite;
 }
 
/* OU : */

.element {
  animation-name: myAnim; /*Nom de votre animation*/
  animation-duration: 5s; /*Durée de votre animation*/
  animation-timing-function: linear; /*Fonction de votre animation (style)*/
  animation-iteration-count: infinite; /*Le nombre de fois qu'une animation sera effectuée*/
}

@keyframes myAnim {
  0%   {transform: scale(1);}
  50%  {transform: scale(1.5);}
  100% {transform: scale(1);}
}

Là encore, des outils peuvent vous aider à réaliser ces animations