Animation

5

Animation-name / Keyframes

Nom de référence de l'animation, indiquant quel @keyframes appliquer.

Pour en savoir plus, voir cet article MDN à propos de animation-name.

Les keyframes indiquent les étapes constituant une animation.

Dans son expression la plus simple, il est possible de spécifier un état de départ from (0%) et un état de fin to (100%) .

@keyframes anim { 
  from { transform: translateX(0%) } 
  to { transform: translateX(400%) }  
}

Une interpolation sera effectuée entre ces deux états.

Pour une animation plus élaborée, il est possible de spécifier plusieurs états avec des pourcentages.

@keyframes anim { 
  0%, 100% { transform: translate(0%, 0%) } 
  25% { transform: translate(400%, 0%) }  
  50% { transform: translate(400%, 200%) }  
  75% { transform: translate(0%, 200%) }  
}

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: @kf

Pour en savoir plus, voir cet article MDN sur @keyframes.

Animation-duration

Définis la durée d'une animation. Ce nombre peut-être en seconde ou en milliseconde.
1s = 1000ms.

Par exemple, nous avons trois fois la même animation animation-name: left-to-right, mais à des durées différentes:

  1. 1 seconde
  2. 2 secondes
  3. 3 secondes

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur animation-duration.

Animation-timing-function

Dicte à l'animation son rythme. Par exemple, dans l'animation précédente on remarque que chaque carré accélère progressivement avant de ralentir ensuite. Ce rythme est appelé ease et est celui par défaut des animations.

L'exemple suivant contient six fois la même animation, mais avec des rythmes différents

  1. linear vitesse constante, n'accélère ou ne ralentis jamais ↗️
  2. ease accélère progressivement et ralentis en fin de parcours (Comportement par défaut)
  3. ease-in-out commence lentement et ralentis en fin de parcours.
  4. ease-in commence lentement ⤴️
  5. ease-out ralentis en fin de parcours ⤵️
  6. cubic-bezier Rythme personnalisable via une courbe de Bézier.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour créer et visualiser facilement des courbes de Bézier cubic-bezier.com

Pour en savoir plus, voir cet article MDN sur animation-timing-function.

Animation-delay

Définis le délai d'attente avant de démarrer une animation. Par défaut, cette propriété est à 0s. Si une valeur négative est attribuée, l'animation débutera déjà commencé, comme-ci l'équivalent de la valeur s'était déjà écoulée.

Par exemple:

  1. Aucun délai
  2. Délais de 0.5s
  3. Délais d'une seconde

Voir le CodePen de Simon Arnold (@smnarnold).

Le délai n'est effectif qu'au démarrage d'une animation. Si celle-ci joue plus d'une fois, le délai ne sera pas effectif à chaque itération.

Pour en savoir plus, voir cet article MDN sur animation-delay.

Animation-iteration-count

Indique le nombre de fois qu'une animation doit-être joué (par défaut 1). Ce nombre peut-être compris entre 0 et ∞ et accepte les fractions. Il est aussi possible de spécifier infinite pour qu'elle joue à l'infinie.

Par exemple:

  1. Joue 1x
  2. Joue 2x
  3. Joue à l'infinie ♾️

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur animation-iteration-count.

Animation-direction

Indique la direction dans laquelle une animation doit-être joué.

Valeurs possibles:

  • normal du début vers la fin (par défaut)
  • reverse de la fin vers le début
  • alternate alterne entre normal et reverse à chaque itération de l'animation.
  • alternate-reverse alterne entre reverse et normal à chaque itération de l'animation.

Par exemple:

  1. Normal
  2. Renversé
  3. Alterné

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur animation-direction.

Animation-fill-mode

Indique l'apparence que doit prendre l'élément lorsque l'animation est terminée.

Valeurs possibles:

  • none redevient tel qu'avant l'animation (par défaut)
  • forwards garde l'apparence donnée par l'animation à la fin
  • backwards garde l'apparence donnée par l'animation au  début
  • both combine l'apparence donnée par l'animation au  début et à la fin

Par exemple:

  1. None
  2. Forwards

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur animation-fill-mode.

Animation-play-state

Indique si une animation doit jouer ou être en pause.

Valeurs possibles et exemple:

  1. running l'animation joue
  2. paused l'animation est en pause

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN sur animation-play-state.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme