Principe

Les transitions s'effectuent en trois étapes

  • Création de l'état initial

  • Création de l'état final avec l'événement qui le déclenche

  • Gestion de la transition

DéfinitionÉtat initial

CSS initial

1
div {
2
  width : 100px;
3
  height : 100px;
4
  background-color : red;
5
}

On ajoute la liste des propriétés à animer (transition-property) et la vitesse (transition-duration)

1
div {
2
  width : 100px;
3
  height : 100px;
4
  background-color : red;
5
  transition-property : width, background-color;
6
  transition-duration : 3s;
7
}

DéfinitionÉtat final

CSS final exécuté suite à un événement ( :hover, :focus, :valid, :invalid, :active, :checked, :enabled, :disabled)

1
div:hover {
2
  width: 200px;
3
  background-color: green;
4
}

DéfinitionGestion de la transition

On ajoute la liste des propriétés à animer (transition-property) et la vitesse (transition-duration).

On peut gérer la transition de l'état initial vers l'état final en ajoutant la transition à l'état final.

La propriété transition-property indique les propriétés qui doivent évoluer.

La propriété transition-duration indique la durée de la transition.

1
div:hover {
2
  width : 200px;
3
  background-color : green;
4
  transition-property : width, background-color;
5
  transition-duration : 3s;
6
}
Principe de transition

On peut gérer la transition de l'état final vers l'état initial en ajoutant la transition à l'état initial.

1
div {
2
  width : 100px;
3
  height : 100px;
4
  background-color : red;
5
  transition-property : width, background-color;
6
  transition-duration : 3s;
7
}

Dans le cas particulier où seul l'état initial est créé, la transition concerne aussi l'état final.

DéfinitionRetard et Accélération

Ajouter un retard

1
div {
2
  width : 100px;
3
  height : 100px;
4
  background-color : red;
5
  transition-property : width, background-color;
6
  transition-duration : 3s;
7
  transition-delay : 2s;
8
}
Principe de transition

Ajouter une fonction d’accélération transition-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
  width : 100px;
3
  height : 100px;
4
  background-color : red;
5
  transition-property : width, background-color;
6
  transition-duration : 3s;
7
  transition-delay : 2s;
8
  transition-timing-function: cubic-bezier(0.1, 0.6, 0.9, 0.4);
9
}
Principe de transition

En raccourci :

1
div {
2
  width : 100px;
3
  height : 100px;
4
  background-color : red;
5
  transition: all 3s cubic-bezier(0.1, 0.6, 0.9, 0.4) 2s;
6
}

Combinaison :

1
div {
2
  width : 100px;
3
  height : 100px;
4
  background-color : red;
5
  transition: width 3s,  background-color 2s 1s;
6
}