Animation CSS

Animation CSS

CSS permet l'animation d'éléments HTML sans utiliser JavaScript ou Flash !

Dans ce chapitre, vous découvrirez les propriétés suivantes :

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

Prise en charge du navigateur pour les animations

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.

Qu'est-ce qu'une animation CSS ?

Une animation permet à un élément de passer progressivement d'un style à un autre.

Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous le souhaitez.

Pour utiliser l'animation CSS, vous devez d'abord spécifier des images clés pour l'animation.

Les images clés contiennent les styles que l'élément aura à certains moments.

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 lier l'animation à un élément.

L'exemple suivant lie l'animation "example" à l'élément <div>. L'animation durera 4 secondes et changera progressivement la couleur d'arrière-plan de l'élément <div> de "rouge" à "jaune":

Remarque : La animation-durationpropriété définit la durée d'exécution d'une animation. Si la animation-durationpropriété n'est pas spécifiée, aucune animation ne se produira, car la valeur par défaut est 0s (0 seconde). 

Dans l'exemple ci-dessus, nous avons spécifié quand le style changera en utilisant les mots-clés "from" et "to" (qui représentent 0 % (début) et 100 % (terminé)).

Il est également possible d'utiliser des pourcentages. En utilisant le pourcentage, vous pouvez ajouter autant de changements de style que vous le souhaitez.

L'exemple suivant changera la couleur d'arrière-plan de l'élément <div> lorsque l'animation sera terminée à 25 %, terminée à 50 %, et à nouveau lorsque l'animation sera terminée à 100 % :

L'exemple suivant changera à la fois la couleur d'arrière-plan et la position de l'élément <div> lorsque l'animation sera terminée à 25 %, terminée à 50 %, et à nouveau lorsque l'animation sera terminée à 100 % :

Retarder une animation

La animation-delaypropriété spécifie un délai pour le démarrage d'une animation.

L'exemple suivant a un délai de 2 secondes avant de démarrer l'animation :

Les valeurs négatives sont également autorisées. Si vous utilisez des valeurs négatives, l'animation démarrera comme si elle avait déjà joué pendant N secondes.

Dans l'exemple suivant, l'animation démarrera comme si elle avait déjà joué pendant 2 secondes :

Définir combien de fois une animation doit s'exécuter

La animation-iteration-countpropriété spécifie le nombre de fois qu'une animation doit s'exécuter.

L'exemple suivant exécutera l'animation 3 fois avant de s'arrêter :

L'exemple suivant utilise la valeur "infinite" pour que l'animation se poursuive indéfiniment :

Exécuter l'animation en sens inverse ou en cycles alternés

La animation-directionpropriété spécifie si une animation doit être lue en avant, en arrière ou en cycles alternés.

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

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

L'exemple suivant exécutera l'animation dans le sens inverse (vers l'arrière) :

L'exemple suivant utilise la valeur "alternate" pour que l'animation s'exécute d'abord en avant, puis en arrière :

L'exemple suivant utilise la valeur "alternate-reverse" pour que l'animation s'exécute d'abord en arrière, puis en avant :

Spécifiez la courbe de vitesse de l'animation

La animation-timing-functionproprié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émarrage lent, puis rapide, puis se termine lentement (c'est la valeur 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 cubique-bézier

L'exemple suivant montre quelques-unes des différentes courbes de vitesse qui peuvent être utilisées :

Spécifier le mode de remplissage pour une animation

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-modepropriété spécifie un style pour l'élément cible lorsque l'animation n'est pas en cours de lecture (avant qu'elle ne démarre, après qu'elle se termine 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 la direction de l'animation et du nombre d'itérations de l'animation)
• 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 retard de l'animation
• both - L'animation suivra les règles pour l'avant et l'arrière, é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é lorsque l'animation se termine :

L'exemple suivant permet à l'élément <div> d'obtenir les valeurs de style définies par la première image clé avant le début de l'animation (pendant la période de délai d'animation) :

L'exemple suivant permet à l'élément <div> d'obtenir les valeurs de style définies par la première image clé avant le démarrage de l'animation et de conserver les valeurs de style de la dernière image clé lorsque l'animation se termine :

Propriété de raccourci d'animation

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

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

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: ;
  : 2s;
}

@keyframes example {
  from {: red;}
  to {: blue;}
}
</style>

<body>
  <div>This is a div</div>
</body>

Propriétés d'animation CSS

Le tableau suivant répertorie la règle @keyframes et toutes les propriétés d'animation CSS :