Animation

@keyframes

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%) }  
}

CodePen | smnarnold 👀

animation-name

Permet d'attribuer une animation à partir de son nom de référence en indiquant quel @keyframes appliquer à quel élément.

Par exemple, pour que l'élément avec la classe .element ait l'animation intitulée anim, il est possible de faire:

.element {
  animation-name: anim;
}

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

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.

animation-iteration-count

Indique le nombre de fois qu'une animation doit être jouée (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'infini.

Par exemple:

1. Joue 1x

2. Joue 2x

3. Joue à l'infinie ♾️

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

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é

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

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