Animation CSS
Animation CSS
CSS permet l’animation d’éléments HTML sans utiliser JavaScript ou Flash !
CSS
Dans ce chapitre, vous découvrirez les propriétés suivantes :
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
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é.
| Propriété | |||||
|---|---|---|---|---|---|
| @images clés | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| nom_animation | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| animation-durée | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| délai d’animation | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| nombre d’itérations d’animation | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| animation-direction | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| fonction de synchronisation d’animation | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| mode de remplissage d’animation | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
| animation | 43,0 | 10.0 | 16.0 | 9.0 | 30,0 |
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 le @keyframes
En règle générale, 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
Exemple
/* Le code de l’animation */
@exemple d’images clés {
de {background-color : rouge ;}
à {background-color : jaune ;}
}
/* L’élément auquel appliquer l’animation */
div {
largeur : 100 pixels ;
hauteur : 100px ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
}
Essayez-le vous-même »
Note: Le animation-duration La propriété définit la durée d’exécution d’une animation. Si la animation-duration proprié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
Exemple
/* Le code de l’animation */
@exemple d’images clés {
0 % {couleur de fond : rouge ;}
25 % {couleur de fond : jaune ;}
50 % {couleur de fond : bleu ;}
100 % {couleur de fond : vert ;}
}
/* L’élément auquel appliquer l’animation */
div {
largeur : 100 pixels ;
hauteur : 100px ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
}
Essayez-le vous-même »
L’exemple suivant changera à la fois la couleur d’arrière-plan et la position de l’élément
Exemple
/* Le code de l’animation */
@exemple d’images clés {
0 % {couleur de fond : rouge ; gauche : 0px ; haut : 0px ;}
25 % {couleur de fond : jaune ; gauche : 200 pixels ; haut : 0px ;}
50 % {couleur de fond : bleu ; gauche : 200 pixels ; haut : 200px ;}
75 % {couleur de fond : vert ; gauche : 0px ; haut : 200px ;}
100 % {couleur de fond : rouge ; gauche : 0px ; haut : 0px ;}
}
/* L’élément auquel appliquer l’animation */
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
}
Essayez-le vous-même »
Retarder une animation
Le animation-delay La proprié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 :
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
délai d’animation : 2 s ;
}
Essayez-le vous-même »
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 :
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
délai d’animation : -2 s ;
}
Essayez-le vous-même »
Définir combien de fois une animation doit s’exécuter
Le animation-iteration-count La proprié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 :
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
nombre d’itérations d’animation : 3 ;
}
Essayez-le vous-même »
L’exemple suivant utilise la valeur « infinite » pour que l’animation se poursuive indéfiniment :
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
nombre d’itérations d’animation : infini ;
}
Essayez-le vous-même »
Exécuter l’animation en sens inverse ou en cycles alternés
Le animation-direction La proprié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éfautreverse– 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èrealternate-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) :
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
direction de l’animation : inverse ;
}
Essayez-le vous-même »
L’exemple suivant utilise la valeur « alternate » pour que l’animation s’exécute d’abord en avant, puis en arrière :
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
nombre d’itérations d’animation : 2 ;
animation-direction : alternative ;
}
Essayez-le vous-même »
L’exemple suivant utilise la valeur « alternate-reverse » pour que l’animation s’exécute d’abord en arrière, puis en avant :
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
position : relative ;
couleur de fond : rouge ;
nom-animation : exemple ;
durée de l’animation : 4 s ;
nombre d’itérations d’animation : 2 ;
direction de l’animation : alternée-inverse ;
}
Essayez-le vous-même »
Spécifiez la courbe de vitesse de l’animation
Le animation-timing-function La 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é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 finease-in– Spécifie une animation avec un démarrage lentease-out– Spécifie une animation avec une fin lenteease-in-out– Spécifie une animation avec un début et une fin lentscubic-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 :
Exemple
#div1 {animation-timing-function : linéaire ;}
#div2 {animation-timing-function : facilité ;}
#div3 {animation-timing-function : facilité ;}
#div4 {animation-timing-function : facilité ;}
#div5 {animation-timing-function : entrée-sortie ;}
Essayez-le vous-même »
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.
Le animation-fill-mode La proprié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écutionforwards– 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’animationboth– 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
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
fond : rouge ;
position : relative ;
nom-animation : exemple ;
durée de l’animation : 3 s ;
animation-fill-mode : vers l’avant ;
}
Essayez-le vous-même »
L’exemple suivant permet à l’élément
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
fond : rouge ;
position : relative ;
nom-animation : exemple ;
durée de l’animation : 3 s ;
délai d’animation : 2 s ;
animation-fill-mode : vers l’arrière ;
}
Essayez-le vous-même »
L’exemple suivant permet à l’élément
Exemple
div {
largeur : 100 pixels ;
hauteur : 100px ;
fond : rouge ;
position : relative ;
nom-animation : exemple ;
durée de l’animation : 3 s ;
délai d’animation : 2 s ;
animation-fill-mode : les deux ;
}
Essayez-le vous-même »
Propriété de raccourci d’animation
L’exemple ci-dessous utilise six des propriétés d’animation :
Exemple
div {
nom-animation : exemple ;
durée de l’animation : 5 s ;
fonction de synchronisation d’animation : linéaire ;
délai d’animation : 2 s ;
nombre d’itérations d’animation : infini ;
animation-direction : alternative ;
}
Essayez-le vous-même »
Le même effet d’animation que ci-dessus peut être obtenu en utilisant le raccourci
animation propriété:
Propriétés d’animation CSS
Le tableau suivant répertorie la règle @keyframes et toutes les propriétés d’animation CSS :
#Animation #CSS