Animation

La règle @keyframes

Lorsque vous spécifiez des styles CSS dans la @keyframes règle, l’animation passera progressivement du style actuel au nouveau style à certains moments.

Pour qu’une animation fonctionne, vous devez la lier à un élément.

L’exemple suivant lie l’animation « exemple » à l’élément <div>. L’animation durera 4 secondes et changera progressivement la couleur de fond de l’élément <div> de « rouge » à « jaune »:

/* The animation code */ 
@keyframes example { 
from {
background-color: red;
} 
to {
background-color: yellow;
} 
} 
/* The element to apply the animation to */ 
div { 
width: 100px; 
height: 100px; 
background-color: red; 
animation-name: example; 
animation-duration: 4s; 
}
}

La animation-iteration-count propriété spécifie le nombre de fois qu'une animation doit être exécutée.
L'exemple suivant exécute l'animation 3 fois avant son arrêt:
 
div {  
 width: 100px;   
height: 100px;   
position: relative;   
background-color: red;   
animation-name: example;   
animation-duration: 4s;   
animation-iteration-count: 3; 
}
L'exemple suivant utilise la valeur "infinite" pour que l'animation continue à jamais:

div {   
width: 100px;   
height: 100px;   
position: relative;   
background-color: red;   
animation-name: example;   
animation-duration: 4s;   
animation-iteration-count: 
infinite; 
}
La animation-direction propriété spécifie si une animation doit être lue en avant, en arrière ou en alternance.
La propriété animation-direction peut avoir les valeurs suivantes:

• normal– L’animation est lue normalement (en avant). C’est par défaut
  
• reverse – L’animation est lue en sens inverse (en arrière)
  
• alternate – L’animation est jouée en avant puis en arrière
  
• alternate-reverse – L’animation est lue en premier, puis en avant
  
  

La animation-timing-function propriété spécifie la courbe de vitesse de l’animation.

La propriété animation-timing-function peut avoir les valeurs suivantes:

• ease – Spécifie une animation avec un début lent, puis rapide, puis se termine lentement (par défaut)
  
• linear – Spécifie une animation avec la même vitesse du début à la fin
  
• ease-in – Spécifie une animation avec un démarrage lent
  
• ease-out – Spécifie une animation avec une fin lente
  
• ease-in-out – Spécifie une animation avec un début et une fin lents
  
• cubic-bezier(n,n,n,n) – Vous permet de définir vos propres valeurs dans une fonction cubic-bezier

L’exemple suivant montre les différentes courbes de vitesse pouvant être utilisées:

#div1 {animation-timing-function: linear;} 
#div2 {animation-timing-function: ease;} 
#div3 {animation-timing-function: ease-in;} 
#div4 {animation-timing-function: ease-out;} 
#div5 {animation-timing-function: ease-in-out;}

Les animations CSS n’affectent pas un élément avant la lecture de la première image clé ou après la lecture de la dernière image clé. La propriété animation-fill-mode peut remplacer ce comportement.

La animation-fill-mode propriété spécifie un style pour l’élément cible lorsque l’animation n’est pas en lecture (avant le début, après la fin ou les deux).

La propriété animation-fill-mode peut avoir les valeurs suivantes:

• none– Valeur par défaut. L’animation n’appliquera aucun style à l’élément avant ou après son exécution.
  
• forwards – L’élément conservera les valeurs de style définies par la dernière image clé (dépend de l’animation-direction et de l’animation-itération-nombre).
  
• backwards – L’élément obtiendra les valeurs de style définies par la première image clé (dépend de la direction de l’animation) et les conservera pendant la période de délai d’animation.
  
• both – L’animation suivra les règles pour les deux sens, en étendant les propriétés de l’animation dans les deux sens

L’exemple suivant permet à l’élément <div> de conserver les valeurs de style de la dernière image clé à la fin de l’animation:

div {   
width: 100px;   
height: 100px;   
background: red;   
position: relative;   
animation-name: example;   
animation-duration: 3s;   
animation-fill-mode: forwards; }

Animation Sténographie

L’exemple ci-dessous utilise six propriétés d’animation:

div {   
animation-name: example;   
animation-duration: 5s;   
animation-timing-function: linear;   
animation-delay: 2s;   
animation-iteration-count: infinite;   
animation-direction: alternate; 
}

Le même effet d’animation que ci-dessus peut être obtenu en utilisant la animation propriété abrégée :

div {   
animation: example 5s linear 2s infinite alternate; 
}

La animation-play-state propriété spécifie si l’animation est en cours d’exécution ou en pause.Les valeurs:

• paused (Spécifie que l’animation est en pause)
• running (Spécifie que l’animation est en cours d’exécution)
• initial (Définit cette propriété à sa valeur par défaut)
• inherit (Hérite cette propriété de son élément parent)

Mettre en pause une animation:

div {   
animation-play-state: paused;
}

Exemple:

div:hover {   
animation-play-state: paused; 
}

Illustration de ce cour: