Propriété CSS animation

La propriété animation est utilisée pour animer (changer graduellement d'un style à l'autre) les propriétés CSS avec les valeurs discrètes : propriétés de mise en page (border, height, width, etc) propriétés qui définissent la position (left, top), tailles de fonte, couleurs et opacités.

Les propriétés, qui utilisent un mot-clé comme une valeur telle que display: none;, visibility: hidden; ou height: auto; ne peuvent pas être animées.

La règle @keyframes

Pour utiliser une animation, vous devez premièrement spécifier ce qui doit occurer aux moments spécifiques pendant l'animation. Cela est défini à l'aide de la règle @keyframes.

La règle @keyframes est composée d'un mot-clé “@keyframes” suivi par animation-name, qui identifie l'animation. L'animation est puis appliquée à un élément en utilisat cet identificateur comme une valeur pour la propriété animation-name.

Dans les accolades on met des sélecteurs keyframe, qui définissent des keyframes (ou points de repère) dans la séquence de l'animation lorsque les styles doivent être changés. Le sélecteur keyframe peut commencer avec un pourcentage (%) ou avec les mots-clés “from” (même que 0%) et “to” (même que 100%). 0% est un point de départ de l'animation, 100% est le point de la fin.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
      padding: 50px;
      animation: pulse 4s infinite;
      }
      @keyframes pulse {
      0% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      100% { background-color: #d5dce8; }
      }
    </style>
  </head>
  <body>
    <div class="element">L'arrière-plan de ce texte est animé en utilisant la propriété CSS3 animation.</div>
  </body>
</html>

Dans cet exemple, nous avons lié l'animation à l'élément <div>. L'animationn va durer 4 secondes, et elle va graduellement changer la couleur de l'arrière-plan de l'élément <div> de "green" à "grey".

Propriétés liées à l'animation

L’animation est une propriété raccourcie utilisée pour définir toutes les propriétés d’animation dans une seule déclaration. Nous énumérons ci-dessous toutes les propriétés standard liées à l'animation.

Animation-name

La propriété animation-name définit le nom de la règle @keyframes que vous voulez utiliser.

animation-name: keyframe-name | none | initial | inherit

Animation-duration

La propriété animation-duration définit la durée (en secondes ou en millisecondes) d'une animation pour terminer un cycle d'animation.

animation-duration: time | initial | inherit

Animation-timing-function

La propriété animation-timing-function définit la progression de l'animation sur la durée de chaque cycle.

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

Elle peut assumer les valeurs suivantes:

  • ease — (par défaut) l’animation commence lentement, puis devient plus rapide et se termine lentement.
  • ease-in — l’animation a un début lent, mais s’accélère à la fin et s'arrête brusquement.
  • ease-out — l'animation a un début rapide, mais se termine lentement.
  • ease-in-out — l'animation commence et se termine lentement.
  • linear — l'animation a la même vitesse tout au long de l'animation; souvent mieux utilisé pour les changements de couleur ou d'opacité.
  • cubic-bezier (n,n,n,n) - Permet de définir vos propres valeur de 0 à 1.

Animation-delay

La propriété animation-delay définit le temps (en secondes ou milisecondes) entre le chargement et le début de l'animation.

animation-delay: time | initial | inherit

Animation-direction

La propriété animation-direction définit si l'animation doit être lue à l'envers sur des cycles alternés ou non.

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

Les valeurs suivantes peuvent s'appliquer à:

  • normal — (par défaut) l’animation est jouée du début à la fin (keyframes 0% - 100%)
  • reverse — l’animation est jouée de la fin au début avec l’envers, puis revient brusquement à l’état d’origine (keyframes (100% - 0%)
  • alternate — l’animation est jouée du début à la fin, puis elle revient avec aisance à son état d’origine, qui ressemble rembobiner.
  • alternate-reverse — l’animation est jouée de la fin au début, puis revient avec aisance à l’état d’origine.

Animation-iteration-count

La propriété animation-iteration-countéfinit le nombre de fois qu'un cycle d'animation doit être joué avant de s'arrêter. La valeur par défaut est 1, mais toute valeur entière positive peut être définie. Si vous définissez le mot clé infinite, l'animation sera jouée indéfiniment.

La valeur 0 ou n’importe quel nombre négatif supprime l’animation de lecture.
animation-iteration-count: number | infinite | initial | inherit

Animation-fill-mode

La propriété animation-fill-mode spécifie un style pour l'élément appliqué avant ou après l'exécution de l'animation.

animation-fill-mode: none | forwards | backwards | both | initial | inherit

Elle peut assumer les valeurs suivantes:

  • forwards - indique, que l’élément doit conserver les valeurs de style définies par la dernière keyframe (dépend des propriétés animation-iteration-count et animation-direction).
  • backwards - spécifie que l'élément doit obtenir les valeurs de style définies par la première keyframe (dépend de la direction de l'animation) et le conserver dans la période de délai d'animation.
  • both - Indique, que l’animation doit suivre les règles de les deux valeurs: forwards et backwards.
  • none - (par défaut) indique, qu’aucun style ne sera appliqué à l’élément avant et après de l’animation.

Animation-play-state

La propriété animation-play-state indique, si l’animation doit être en lecture ou en pause.

animation-play-state: paused | running | initial | inherit

La valeur initiale est "running".

Maintenant voyons les propriétés liées à l'animation en fonctionnement.

Exemple

@keyframes pulse {
  /* déclarer les actions de l'animation ici */
}

.element {
  animation-name: pulse;
  animation-duration: 3.5s;   
  animation-timing-function: ease-in; 
  animation-delay: 1s ;
  animation-direction: alternate; 
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  Le même peut être déclaré en utilisant la propriété raccourcie animation  
*/

.element {
  animation: 
    pulse
    3.5s
    ease-in
    1s
    alternate
    infinite
    none
    running;
}

Animations multiples

Dans un sélecteur plusieurs , on peut déclarer des animations multiples. Vous devez juste séparer les valeurs par virgules.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
      height: 100%;
      margin: 0;
      }
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .element {
      height: 200px;
      width: 200px;
      background-color: #1c87c9;
      animation: pulse 5s ease infinite alternate,
      nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
      0%, 100% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      }
      @keyframes nudge {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(150px, 0); }
      80% { transform: translate(-150px, 0); }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Support de Navigateurs

43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-


Trouvez-vous cela utile?

Articles Associées