Animations CSS

Animations CSS

CSS peut réaliser des animations 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 première version du navigateur qui prend en charge cette propriété en totalité.

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 donné.

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

Les exemples suivants lient l'animation "example" à l'élément <div>. L'animation durera 4 secondes, et la couleur de fond de l'élément <div> passera progressivement du rouge au jaune :

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

Essayez-le vous-même

Attention :animation-duration L'attribut définit combien de temps il faut pour que l'animation soit terminée. Si non spécifié animation-duration Si l'attribut n'est pas spécifié, l'animation ne se produira 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% (achèvement)), nous avons défini quand les styles changent.

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

Les exemples suivants changent la couleur de fond de l'élément <div> à 25%, 50% et 100% 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 auxquels l'animation est appliquée */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Essayez-le vous-même

Les exemples suivants changent la couleur d'arrière-plan et la position de l'élément <div> à 25%, 50% et 100% de l'animation :

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 auxquels l'animation est appliquée */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Essayez-le vous-même

Décaler l'animation

animation-delay Cette propriété réglemente le délai de début de l'animation.

Les exemples suivants ont 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;
}

Essayez-le 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;
}

Essayez-le vous-même

Définir le nombre de fois que 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.

Les exemples suivants font que l'animation se déroule 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;
}

Essayez-le vous-même

Les exemples suivants utilisent 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;
}

Essayez-le 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 accepte 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 joue l'animation dans le sens opposé (vers l'arrière) :

Exemple

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

Essayez-le vous-même

Les exemples suivants utilisent la valeur "alternate" pour faire avancer l'animation d'abord vers l'avant, puis vers l'arrière :

Exemple

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

Essayez-le vous-même

Les exemples suivants utilisent la valeur "alternate-reverse" pour faire avancer l'animation d'abord vers l'arrière, puis vers l'avant :

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

Essayez-le vous-même

Définir la courbe de vitesse de l'animation

animation-timing-function L'attribut définit la courbe de vitesse de l'animation.

animation-timing-function L'attribut accepte les valeurs suivantes :

  • ease - Définir une animation qui commence lentement, s'accélère puis se termine lentement (par défaut)
  • linear - Définir une animation où la vitesse reste la même de début à fin
  • ease-in - Définir une animation où le début est plus lent
  • ease-out - Définir une animation où la fin est plus lente
  • ease-in-out - Définir une animation où le début et la fin sont plus lents
  • cubic-bezier(n,n,n,n) - Exécutez vos propres valeurs définies dans la fonction de bézier cubique trois fois

Les exemples suivants montrent les différentes courbes de vitesse que vous pouvez 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;}

Essayez-le vous-même

Définir le mode de remplissage de l'animation

Les animations CSS ne modifient 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.

Lorsqu'il n'y a pas de lecture d'animation (avant le début, après la fin ou les deux à la fois),animation-fill-mode L'attribut définit le style de l'élément cible.

L'attribut animation-fill-mode accepte 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 conserve les valeurs de style définies par la dernière pose clé (dépendant de l'animation-direction et de l'animation-iteration-count).
  • backwards - L'élément récupère les valeurs de style définies par la première pose clé (selon l'animation-direction) et conserve 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 d'une 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;
}

Essayez-le vous-même

L'exemple suivant fait que l'élément <div> obtienne la valeur définie par le premier cadre 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;
}

Essayez-le vous-même

L'exemple suivant fait que l'élément <div> obtienne la valeur du premier cadre clé définie avant le début de l'animation, et conserve la valeur du dernier cadre 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;
}

Essayez-le 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;
}

Essayez-le vous-même

Utilisation de 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;
}

Essayez-le 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 doit être jouée 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 s'exécute ou est en pause.
animation-timing-function Définir la courbe de vitesse de l'animation.