Principe

Les animations s'effectuent en deux étapes

  • Création de la fonction

  • Affectation de la fonction et gestion de sa durée et de sa vitesse.

DéfinitionCréation de la fonction

La règle @keyframes permet de déclarer une fonction

1
@keyframes animation {
2
3
}

On donne l'état initial et l'état final

1
@keyframes animation {
2
  from {
3
    background-color: red;
4
  }
5
  to {
6
    background-color: green;
7
    transform: translate(300px);
8
  }
9
}

On peut donner des états intermédiaires

1
@keyframes animation {
2
  from {
3
    background-color: red;
4
  }
5
  50% {
6
    background-color: blue;
7
  }
8
  to {
9
    background-color: green;
10
    transform: translate(300px);
11
  }
12
}

DéfinitionAffectation de la fonction

On précise le nom de la fonction à lancer sur notre sélecteur.

1
div {
2
  animation-name: animation;
3
}

Durée de l'animation.

1
div:hover {
2
  animation-name: animation;
3
  animation-duration: 3s;
4
}

Dans notre exemple l'animation est lancée au survol du bloc.

Principe d'animation

DéfinitionRépétition, retour, accélération et retard

Répétition : animation-iteration-count

infinite

nombre (0, 1, 2.5, 3.4...)

1
div {
2
  animation-name: animation;
3
  animation-duration: 3s;
4
  animation-iteration-count: infinite;
5
}

Dans notre exemple l'animation est lancée immédiatement et à l'infini.

Principe d'animation

Retour : animation-direction

alternate : les itérations alternent dans un sens puis dans l'autre

reverse : les animations vont de l'état final vers l'état initial

alternate-reverse : les itérations alternent en commençant en sens inverse

normal : animation par défaut.

1
div {
2
  animation-name: animation;
3
  animation-duration: 3s;
4
  animation-iteration-count: infinite;
5
  animation-direction: alternate;
6
}
Principe d'animation

Accélération : animation-timing-function

linear : vitesse constante

ease-in : accélère progressivement

ease-out : ralentit progressivement

ease-in-out : accélère puis ralentit

step-start : reste à l'état final toute la durée

step-end : reste à l’état initial toute la durée et saute à l'état final

steps(4, end) : exécute 4 transitions sur la durée

cubic-bezier(0.1, 0.7, 1.0, 0.1) : courbe de bezier

1
div {
2
  animation-name: animation;
3
  animation-duration: 3s;
4
  animation-iteration-count: infinite;
5
  animation-direction: alternate;
6
  animation-timing-function: ease-in-out;
7
}
Principe d'animation

Retard : animation-delay

Ajoute un retard au démarrage

1
div {
2
  animation-name: animation;
3
  animation-duration: 3s;
4
  animation-iteration-count: infinite;
5
  animation-direction: alternate;
6
  animation-timing-function: ease-in-out;
7
  animation-delay: 2s;
8
}
Principe d'animation

Fin : animation-fill-mode

Indique comment les valeurs CSS sont appliquées à la fin d'une animation.

forwards : l’élément gardera les dernières valeurs calculées de CSS

backwards : l'élément reviendra à ses valeurs CSS d'origines.

DéfinitionSimplification

Le code peut se simplifier avec la propriété animation :

1
div {
2
  animation: animation 3s ease-in-out 2s infinite alternate;
3
}

DéfinitionPlusieurs animations

On peut lancer plusieurs animations sur le même élément.

1
div {
2
  animation: animation1 3s, animation2 2s, animation3 4s;
3
}