Les transitions CSS

Les transitions CSS permettent de contrôler la vitesse d’animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l’étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d’accélération donnée.

Les transitions CSS permettent de choisir :

  • les propriétés à animer en les listant explicitement
  • le début de l’animation
  • la durée de l’animation
  • la façon dont la transition s’exécutera

Transition-timing-function

La propriété transition-timing-function spécifie la courbe de vitesse de l’effet de transition. Cette propriété permet à un effet de transition de changer de vitesse sur sa durée.

Timing-function css | 01
linear
ease
ease-in
ease-out
ease-in-out
steps(3,start)
steps(3,end)
cubic-bezier(0, 1.4, 1, 1.4)
cubic-bezier(1.000, 0.010, 0.000, 1.000)