8.4 Transitions CSS

Vous pouvez définir :

• transition-property: quelles propriétés animer
• transition-duration: durée de l’animation
• transition-timing-function: comment les états intermédiaires sont calculés
• transition-delay: pour lancer l’animation après un certain temps

Vous pouvez définir chaque propriété CSS individuellement ou utiliser la version abrégée : transition.
Dans ce cas, seule la durée est obligatoire.

N’oubliez pas qu’une transition est un type d’animation spécifique dans lequel il n’y a qu’un état de départ et un état de fin.

Exemple

Les transitions sont souvent utilisées dans les états de survol (hover).

a { background: lightgrey; color: grey;}
a:hover { background: yellow; color: red;}
a.with-transition { transition: 1s;}

Au lieu que les règles CSS de survol soient instantanées, les couleurs de l’arrière-plan et du texte s’animent lentement.

transition-duration – durée de transition

La durée d’une transition est la seule propriété CSS nécessaire pour créer une transition. Il peut être réglé en secondes 2s ou en millisecondes100ms.

a { background: lightgrey; color: grey;}
a:hover { background: yellow; color: green;}
a.with-fast-transition { transition-duration: 0.5s;}
a.with-slow-transition { transition: 3s;}

transition-property – propriété de transition

Seulement 1/3 des propriétés CSS peuvent être animées. Mozilla a une liste complète.

Par défaut, la propriété transition-property a la valeur all, ce qui signifie simplement qu’elle animera toutes les propriétés possibles.

Vous pouvez décider de n’animer qu’une ou plusieurs propriétés.

a { background: lightgrey; color: grey;}
a:hover { background: yellow; border: 5px solid blue; color: green;}
a.with-background-transition { transition-duration: 2s; transition-property: background;}
a.with-all-transition { transition-duration: 2s;}

La propriété border est entièrement animable et permet de visualiser facilement la transition lente (2 secondes).

transition-timing-function – fonction de synchronisation de transition

La fonction de minutage détermine comment la valeur de chaque propriété est calculée pendant la transition.

Par défaut, la transition est eased : elle accélère au début et ralentit à la fin.

Vous pouvez établir que la transition se fera à une vitesse constante. Les fonctions de minutage peuvent accélérer et / ou ralentir la transition.

Le moyen le plus simple de visualiser les fonctions de minutage consiste à modifier les propriétés de la position – position properties, comme left.

div { left: 0; position: relative; transition: 1s;}
main:hover div { left: 200px;}
.ease { transition-timing-function: ease;} /* Default behavior */
.linear { transition-timing-function: linear;} /* Constant speed */
.ease-in { transition-timing-function: ease-in;}
.ease-out { transition-timing-function: ease-out;}
.ease-in-out { transition-timing-function: ease-out;}

<main>
  <p><strong>Ease</strong>: slow start, fast middle, slow end</p>
  <div class="ease"></div>
  <p><strong>Linear</strong>: constant speed</p>
  <div class="linear"></div>
  <p><strong>Ease In</strong>: slow start, fast end</p>
  <div class="ease-in"></div>
  <p><strong>Ease Out</strong>: fast start, slow end</p>
  <div class="ease-out"></div>
  <p><strong>Ease In Out</strong>: like ease, but with more pronounced acceleration/deceleration curves</p>
  <div class="ease-in-out"></div>
</main>

Gardez à l’esprit que toutes les transitions prennent le même temps (1 seconde).

Si vous souhaitez visualiser le fonctionnement d’autres fonctions de minutage, consultez ceci : Easing Functions Cheat Sheet.

cubic-bezier – Bézier Cubique

Si toutes ces fonctions de chronométrage prédéfinies ne vous conviennent pas, vous pouvez écrire les vôtres à l’aide des fonctions de Bézier cubique.

Le site cubic-bezier.com est un outil simple pour écrire visuellement vos propres courbes.

transition-delay – délai de transition

Un délai définira combien de temps les transitions devront attendre avant de commencer réellement.

Comme pour la durée de transition – transition-duration, vous pouvez utiliser des secondes s ou des millisecondes ms.

a { background : blue; color : white; transition : all 1s;}
div:hover a { background : red;}
a .with-delay { transition-delay : 1s;}

<div>
  <p>Hover the grey area</p>
  <a>Without any delay</a>
  <a class="with-delay">With a second delay</a>
</div>