Animations CSS

Animations CSS

CSS permet d’animer des éléments HTML sans utiliser JavaScript ou Flash !

CSS

Dans ce chapitre, vous apprendrez à connaître les propriétés suivantes :

  • @keyframes
  • animation-name
  • animation-duration

    • .

  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Support des navigateurs pour les animations

Les chiffres dans le tableau spécifient la première version du navigateur qui supporte complètement la propriété.

Propriété
@keyframes 43.0 10,0 16,0 9,0 30.0
animation-name 43.0 10.0 16.0 9,0 30,0
animation-duration 43.0 10,0 16,0 9,0 30,0
animation-delay 43,0 10,0 16,0 9,0 30.0
animation-iteration-count 43.0 10.0 16.0 9,0 30,0
animation-direction 43.0 10,0 16,0 9,0 30,0
animation-timing-function 43,0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0 animation 43.0 10.0 16.0 9.0 30.0

Que sont les animations 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 une animation CSS, vous devez d’abord spécifier certaines images clés pour l’animation.

Les images clés détiennent les styles que l’élément aura à certains moments.

La règle @keyframes

Lorsque vous spécifiez des styles CSS à l’intérieur de la règle @keyframes, 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 « exemple » à l’élément <>. L’animation durera 4 secondes, et elle changera progressivement la couleur de fond de l’élément <> de « rouge » à « jaune »:

Exemple

/* Le code de l’animation */
@keyframes exemple {
from {background-color : rouge;}
to {background-color : yellow;}
}
/* L’élément auquel appliquer l’animation */
div {
width : 100px;
height : 100px;
background-color : red;
animation-name : example;
animation-duration : 4s;
}

Essayez vous-même  »

Note : La propriété animation-duration définit le temps que doit prendre une animation pour se terminer. Si la propriété animation-duration 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é à quel moment le style changera en utilisant les mots-clés « from » et « to » (qui représentent 0% (début) et 100% (fin)).

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

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

Exemple

/* Le code d’animation */
@keyframes exemple{
0% {background-color : rouge;}
25% {background-color : yellow;}
50% {background-color : blue;}
100% {background-color : green;}
}
/* L’élément auquel appliquer l’animation */
div {
width : 100px;
hauteur : 100px;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
}

Essayez vous-même  »

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

Exemple

/* Le code de l’animation */
@keyframes exemple{
0% {background-color:red ; left:0px ; top :0px;}
25% {background-color:yellow ; left:200px ; top:0px;}
50% {background-color:blue ; left:200px ; top:200px;}
75% {background-color:green ; left:0px ; top:200px;}
100% {background-color:red ; left :0px ; top:0px;}
}
/* L’élément auquel appliquer l’animation */
div {
width : 100px;
height : 100px;
position : relative;
background-color : red;
animation-name : example;
animation-duration : 4s;
}

Essayez vous-même  »

Délai d’une animation

La propriété animation-delay spécifie un délai pour le début d’une animation.

L’exemple suivant a un délai de 2 secondes avant le début de l’animation:

Exemple

Division {
largeur : 100px;
hauteur : 100px;
position : relative;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
animation-delay : 2s;
}

Essayez 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

Division {
largeur : 100px;
hauteur : 100px;
position : relative;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
animation-delay : -2s;
}

Essayez vous-même  »

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

La propriété animation-iteration-count 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

Division {
largeur : 100px;
hauteur : 100px;
position : relative;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
animation-iteration-count : 3;
}

Essayez vous-même  »

L’exemple suivant utilise la valeur « infinite » pour que l’animation se poursuive éternellement :

Exemple

div {
largeur : 100px;
hauteur : 100px;
position : relative;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
animation-iteration-count : infinite;
}

Essayez vous-même  »

Lancer une animation en sens inverse ou en cycles alternés

La propriété animation-direction spécifie si une animation doit être jouée 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 la valeur par défaut
  • reverse – L’animation est jouée en sens inverse (vers l’arrière)
  • alternate – L’animation est d’abord jouée vers l’avant, puis en arrière
  • alternate-reverse – L’animation est d’abord jouée en arrière, puis en avant

L’exemple suivant exécutera l’animation en sens inverse (en arrière) :

Exemple

div {
largeur : 100px;
hauteur : 100px;
position : relative;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
animation-direction : reverse;
}

Essayez vous-même  »

L’exemple suivant utilise la valeur « alternate » pour que l’animation se déroule d’abord en avant, puis en arrière :

Exemple

div {
largeur : 100px;
hauteur : 100px;
position : relative;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
animation-iteration-compte : 2;
animation-direction : alternate;
}

Essayez vous-même  »

L’exemple suivant utilise la valeur « alternate-reverse » pour que l’animation se déroule d’abord en arrière, puis en avant :

Exemple

div {
largeur : 100px;
hauteur : 100px;
position : relative;
couleur de fond : rouge;
nom de l’animation : exemple;
durée de l’animation : 4s;
animation-iteration-compte : 2;
animation-direction : alternate-reverse;
}

Essayez vous-même  »

Spécifier la courbe de vitesse de l’animation

La propriété animation-timing-function 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 (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ébut 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 lente
  • cubic-bezier(n,n,n,n) – Vous permet de définir vos propres valeurs dans une fonction cubique-bezier

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

Exemple

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

Essayez vous-même  »

Spécifier le mode de remplissage Pour une animation

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

La propriété animation-fill-mode spécifie un style pour l’élément cible lorsque l’animation n’est pas jouée (avant son début, après sa 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 du style qui est défini par la dernière image clé (dépend de animation-direction et animation-iteration-count)
  • backwards – L’élément obtiendra les valeurs de style qui est défini par la première image clé (dépend de l’animation-direction), et les conservera pendant la période d’animation-délai
  • both – L’animation suivra les règles pour l’avant et l’arrière, en étendant les propriétés de l’animation dans les deux directions

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

Exemple

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

Essayez vous-même  »

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 d’animation-delay) :

Exemple

div {
largeur : 100px;
hauteur : 100px;
background : red;
position : relative;
animation-name : example;
animation-duration : 3s;
animation-delay : 2s;
animation-fill-mode : backwards;
}

Essayez vous-même  »

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, et de conserver les valeurs de style de la dernière image clé lorsque l’animation se termine :

Exemple

div {
largeur : 100px;
hauteur : 100px;
background : red;
position : relative;
animation-name : example;
animation-duration : 3s;
animation-delay : 2s;
animation-fill-mode : both;
}

Essayez vous-même  »

Animation Shorthand Property

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

Exemple

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

Essayez vous-même  »

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

Exemple

div{
animation : exemple 5s linéaire 2s infini alterné;
}

Essayez vous-même  »

Testez vous-même avec des exercices !

Propriétés d’animation CSS

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

Property Description
@keyframes Spécifie . le code d’animation
animation Une propriété raccourcie pour définir toutes les propriétés d’animation
animation-delay Spécifie un délai pour le début d’une animation
animation-direction Spécifie si une animation doit être jouée en avant, en arrière ou en cycles alternés
animation-duration Précise le temps que doit prendre une animation pour terminer un cycle animation-fill-mode Précise un style pour l’élément lorsque l’animation ne joue pas (avant qu’elle ne commence, après qu’elle se termine, ou les deux)
animation-iteration-count Spécifie le nombre de fois qu’une animation doit être jouée
animation-name Spécifie le nom de l’animation @keyframes
animation-play-state Précise si l’animation est en cours ou en pause
animation-timing-function Précise la courbe de vitesse de l’animation

.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *