Animations CSS

Animations CSS

CSS peut réaliser des effets d'animation des éléments HTML sans utiliser JavaScript ou Flash !

CSS

Dans ce chapitre, vous apprendrez 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 version du navigateur qui prend en charge pleinement cette propriété.

Propriété Chrome IE Firefox Safari Opera
@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

Qu'est-ce que l'animation CSS ?

Les animations font que les éléments passent progressivement d'un style à un autre.

Vous pouvez modifier à volonté un nombre quelconque de propriétés CSS.

Pour utiliser les animations CSS, vous devez d'abord spécifier quelques cadres clés pour l'animation.

Les cadres clés contiennent les styles que l'élément possède à un moment donné.

@keyframes règle

Si vous dans @keyframes Les règles spécifient les styles CSS, l'animation passera progressivement du style actuel au nouveau style à un moment spécifique.

Pour que l'animation fonctionne, elle doit être liée à un élément.

L'exemple ci-dessous lie l'animation "example" à l'élément <div>. L'animation durera 4 secondes, tout en changeant progressivement la couleur de fond de l'élément <div> de "red" à "yellow":

Exemple

/* Code de l'animation */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Appliquer l'effet d'animation à cet élément */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Essayer vous-même

Attention :animation-duration L'attribut définit le temps nécessaire pour que l'animation soit terminée. Si il n'est pas spécifié animation-duration Si l'attribut n'est pas spécifié, l'animation ne se déclenchera pas, car la valeur par défaut est 0s (0 secondes).

Dans l'exemple ci-dessus, en utilisant les mots-clés "from" et "to" (représentant 0% (début) et 100% (fin)), nous avons défini quand les styles changent.

Vous pouvez également utiliser des pourcentages. En utilisant des pourcentages, vous pouvez ajouter plusieurs changements de styles selon vos besoins.

Les exemples ci-dessous changeront la couleur de fond de l'élément <div> à 25%, 50% et 100% de la fin de l'animation :

Exemple

/* Code de l'animation */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Éléments appliquant l'animation */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Essayer vous-même

L'exemple suivant change la couleur de fond et la position de l'élément <div> lorsque l'animation atteint 25%, 50% et 100% :

Exemple

/* Code de l'animation */
@keyframes example {
  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éments appliquant l'animation */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Essayer vous-même

Décaler l'animation

animation-delay Cette propriété spécifie le délai avant le début de l'animation.

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

Exemple

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Essayer vous-même

Les valeurs négatives sont également autorisées. Si une valeur négative est utilisée, l'animation commence à jouer, comme si elle avait déjà joué N secondes.

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

Exemple

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Essayer vous-même

Définir le nombre de fois où l'animation doit être jouée

animation-iteration-count Cette propriété spécifie le nombre de fois que l'animation doit être jouée.

L'exemple suivant fait avancer l'animation 3 fois avant de s'arrêter :

Exemple

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Essayer vous-même

L'exemple suivant utilise la valeur "infinite" pour que l'animation dure éternellement :

Exemple

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Essayer vous-même

Animation en sens inverse ou alternatif

animation-direction Cette propriété spécifie si l'animation doit être jouée vers l'avant, vers l'arrière ou alternativement.

animation-direction L'attribut peut accepter les valeurs suivantes :

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

L'exemple suivant fait avancer l'animation dans le sens opposé (reculer) :

Exemple

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Essayer vous-même

L'exemple suivant utilise la valeur "alternate" pour faire d'abord reculer l'animation, puis avancer :

Exemple

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Essayer vous-même

L'exemple suivant utilise la valeur "alternate-reverse" pour faire d'abord avancer l'animation, puis la faire reculer :

Exemple

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Essayer vous-même

Spécifier la courbe de vitesse de l'animation

animation-timing-function L'attribut spécifie la courbe de vitesse de l'animation.

animation-timing-function L'attribut peut accepter les valeurs suivantes :

  • ease - Spécifiez une animation qui commence lentement, s'accélère puis se termine lentement (par défaut)
  • linear - Définissez une animation où la vitesse est la même de début à fin
  • ease-in - Définissez une animation qui commence lentement
  • ease-out - Définissez une animation qui se termine lentement
  • ease-in-out - Spécifiez une animation plus lente au début et à la fin
  • cubic-bezier(n,n,n,n) - Exécutez vos propres valeurs définies dans la fonction cubique Bezier

Les exemples suivants montrent quelques courbes de vitesse différentes que l'on peut utiliser :

Exemple

#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;}

Essayer vous-même

Spécifier le mode de remplissage de l'animation

Les animations CSS n'affectent pas l'élément avant la lecture de la première pose clé ou après la lecture de la dernière pose clé.animation-fill-mode l'attribut peut couvrir ce comportement.

Lorsque l'animation n'est pas jouée (avant le début, après la fin ou les deux),animation-fill-mode L'attribut spécifie le style de l'élément cible.

L'attribut animation-fill-mode peut accepter les valeurs suivantes :

  • none - Valeur par défaut. L'animation n'applique pas de style à l'élément avant ou après l'exécution.
  • forwards - L'élément conservera les valeurs de style définies par la dernière pose clé (dépendantes de l'animation-direction et de l'animation-iteration-count).
  • backwards - L'élément obtiendra les valeurs de style définies par la première pose clé (selon l'animation-direction) et conservera cette valeur pendant la période de délai de l'animation.
  • both - L'animation suit à la fois les règles vers l'avant et vers l'arrière, étendant ainsi les propriétés de l'animation dans les deux directions.

L'exemple suivant montre comment conserver les valeurs de style de la dernière pose clé pour l'élément <div> à la fin de l'animation :

Exemple

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

Essayer vous-même

L'exemple suivant fait que l'élément <div> obtienne la valeur définie par la première frame clé avant le début de l'animation (pendant la période de délai de l'animation) :

Exemple

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

Essayer vous-même

L'exemple suivant fait que l'élément <div> obtienne la valeur de la première frame clé définie avant le début de l'animation, et conserve la valeur de la dernière frame clé à la fin de l'animation :

Exemple

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

Essayer vous-même

Propriété abrégée d'animation

L'exemple suivant utilise six propriétés d'animation :

Exemple

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

Essayer vous-même

Utiliser l'abréviation animation La propriété peut également réaliser l'effet d'animation identique à l'exemple précédent :

Exemple

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

Essayer vous-même

Propriétés d'animation CSS

Le tableau suivant liste les règles @keyframes et toutes les propriétés d'animation CSS :

Propriété Description
@keyframes Définit le mode d'animation.
animation Définit la propriété abrégée pour toutes les propriétés d'animation.
animation-delay Définit le délai de début de l'animation.
animation-direction Définit si l'animation joue vers l'avant, vers l'arrière ou alternativement.
animation-duration Définit le temps qu'il faut à l'animation pour terminer un cycle.
animation-fill-mode Définit le style de l'élément lorsque l'animation n'est pas jouée (avant le début, après la fin, ou les deux)
animation-iteration-count Définit le nombre de fois où l'animation doit être jouée.
animation-name Définit le nom de l'animation @keyframes.
animation-play-state Définir si l'animation doit s'exécuter ou être mise en pause.
animation-timing-function Définir la courbe de vitesse de l'animation.