Transition

Les transitions permettent de passer d'un état A à un état B d'une façon élégante.

transition-property

Définis la ou les propriété(s) affectées par une transition.

Il est possible, d'indiquer que toutes les propriétés capables de transitionner doivent transitionner en utilisant la valeur all.

Utiliser la valeur all avec parcimonie afin d’éviter d’impacter négativement les performances de votre transition.

Il est aussi possible de spécifier un certain nombre de propriétés en les séparant par une virgule.

Par exemple:

transition-property: background-color, transform;
ERREUR FRÉQUENTE
Ce ne sont pas toutes les propriétés qui peuvent effectuer une transition. Par exemple, display ou background-image ne peut pas effectuer de transition. Voir la liste MDN des propriétés capable d’effectuer une transition. transition-property transition-property
OUTIL Animatable Lea Verou 👩‍💻 a mis sur pied une page permettant de visualiser rapidement les différentes propriétés animables.
transition-duration

Définis la durée de la transition. Ce nombre peut-être en seconde ou en milliseconde. 1s = 1000ms.

Par exemple, au survole nous avons trois fois la même transition, mais avec des durées différentes:

  1. 0.5 seconde
  2. 1 seconde
  3. 1.5 secondes
transition-duration transition-duration
EXERCICE Transition - Spider-Man Pour cet exercice nous allons effectuer une transition sur le masque de Spider-Man afin de le faire passer d’un costume à un autre.
transition-timing-function

Dicte le rythme de la transition. Par exemple, dans la transition précédente on remarque que chaque carré accélère progressivement avant de ralentir ensuite. Ce rythme est appelé ease et est celui par défaut des transitions.

L'exemple suivant contient six fois la même transition au survole, mais avec des rythmes différents.

  1. linear n'accélère ou ne ralentis jamais ↗️
  2. ease accélère progressivement et ralentis en fin de parcours (Comportement par défaut)
  3. ease-in-out commence lentement et ralentis en fin de parcours.
  4. ease-in commence lentement ⤴️
  5. ease-out ralentis en fin de parcours ⤵️
  6. cubic-bezier Rythme personnalisable via une courbe de Bézier.
transition-timing-function transition-timing-function
OUTIL Cubic-Bezier.com Outil développé par Lea Verou permettant de créer et de visualiser facilement des courbes de bézier.
transition-delay

Définis le délais d'attente avant de démarrer une transition. Par défaut, cette propriété est à 0s. Si une valeur négative est attribuée, la transition débutera déjà commencée, comme-ci l'équivalent de la valeur s'était déjà écoulée.

Par exemple au survole:

  1. Aucun délai
  2. Délais de 0.25s
  3. Délais de -0.25s (commence au milieu de l'animation)
transition-delay transition-delay Syntaxe courte

Afin de simplifier l'écriture des transitions, il est possible de regrouper toutes les précédentes propriétés en une seule comme le font les propriétés margin et padding avec top, right, bottom et left.

Pour ce faire, il suffit d'appeler la propriété transition et de lui passer au minimum deux valeurs:

  1. La ou les propriétés à transitionner
  2. La durée de la transition

Par exemple:

transition-property: transform; transition-duration: 1s;

Pourrait devenir:

transition: transform 1s;

Il est aussi possible de spécifier les autres propriétés si désiré en les ajoutant à la suite.

Par exemple, pour avoir un délai de 0.5s et une transition linéaire:

transition: transform 1s 0.5s linear;
EXERCICE Transition - BoJack Horseman Pour cet exercice nous allons animer les cartes présentant les personnages principaux de la série animée BoJack Horseman 🐴.
Où définir sa transition

Si les propriétés d'une transition sont définies sur un état en particulier, par exemple :hover, et non à sa base, cette propriété ne s'appliquera que lorsque cet état sera activé. Par exemple, à gauche la durée de la transition est appliquée sur l'élément de base. Le navigateur applique donc le transition-duration en tout temps sur l'élément, qu'il soit survolé ou non. Tandis qu'à droite, le transition-duration est défini sur le :hover uniquement, donc la transition ne s'effectue qu'au survole. Dès que l'élément n'est plus survolé, il retourne abruptement à sa position de départ.

À gauche, transition sur l’élément de base.
À droite, transition sur l’élément survolé seulement.
EXERCICE Transition - Boutons Pour cet exercice nous allons indiquer quel bouton a le focus à l’aide de l’émoji ☝️.
EXERCICE Transition - Fantôme + Mario Pour cet exercice nous allons récupérer l’animation du déplacement de fantôme 👻 réalisée dans un exercice précédent. Cependant, comme tout bon fantôme, celui-ci devra se figer lorsque Mario le regardera 👀