Transitions

Introduction

Les transitions sont un moyen simple d'animer les éléments de nos pages Web lorsque nous activons des règles CSS. Les transitions nous permettent essentiellement d'animer n'importe quelle propriété CSS lorsque sa valeur change, ce qui nous permet de rendre notre site Web plus beau et de plaire aux designers graphiques. Elles sont donc un supplément intéressant à vos pages Web.

Syntaxe

La syntaxe de base d'une transition est assez simple. Vous n'avez qu'à utiliser le code ci-dessous, mais en modifiant les propriete, duree, timing et delai par les valeurs dont que vous désirez.

Propriété

Dans la syntaxe ci-dessus, vous devez remplacer propriete par la propriété sur laquelle vous voulez appliquer la transition. Cela vous permet d'avoir une transition sur certaines propriétés, mais pas sur d'autres. Il est aussi possible d'utiliser le mot-clé all pour avoir une transition sur toutes les propriétés en même temps. Dans le même style, vous pouvez mettre none pour indiquer de ne plus faire de transition.

Durée

Dans la syntaxe ci-dessus, vous devez remplacer duree par la durée totale de la transition. C'est donc essentiellement la longueur de l'animation. Celle-ci doit être spécifié avec une unité de mesure soit en secondes (s) ou en millisecondes (ms).

Fonction de timing

Dans la syntaxe ci-dessus, vous devez remplacer timing par le nom de la fonction de timing que vous voulez utiliser. Une fonction de timing est indique à quelle vitesse exécuter notre animation en fonction du temps. Il est possible de définir ses propres fonctions ici, mais nous utiliserons généralement celle de base qui nous sont fournie par le navigateur.

Délai

Dans la syntaxe ci-dessus, vous devez remplacer delai par le délais avant que la transition démarre. Comme pour la durée, nous avons besoin d'une valeur en secondes (s) ou en millisecondes (ms).

Fonction de timing

Les navigateurs Web nous offrent des fonctions de timing pour nous simplifier la tâche dans nos transitions. Pour utiliser une de ces fonctions, nous avons uniquement besoin de spécifier son nom. Voici donc un exemple de chacune des fonctions de timing prédéfinies par les navigateurs:

linear

ease

ease-in

ease-in-out

ease-out

Limites

Bien que les transitions sont très pratiques, elles ont tout de même quelques limites. Une des plus connue est que les transitions ne fonctionnent pas avec la propriété display. Bref, si vous avez un changement d'affichage, aucune transition ne fonctionnera sur l'élément, même si cette transition serait valide.

Si nous voulons afficher ou cacher un élément avec des transitions, vous devrez utiliser des trucs différents que de mettre un display: none;. Les propriétés opacity et visibility peuvent toutefois être des options intéressantes.