Transition
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 la suivante:
CSS
.selecteur {
transition : [propriété] [durée] [fonction-de-timing] [délais]
}
[propriété]
Indique sur quelle propriété vous voulez appliquer la transition. Cela vous permet ainsi
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]
Indique la durée totale de la transition, 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]
Fonction indiquant à 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élais]
C'est 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).
Exemple concret
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:
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 la suivante:
CSS
.selecteur {
transition : [propriété] [durée] [fonction-de-timing] [délais]
}
[propriété]
Indique sur quelle propriété vous voulez appliquer la transition. Cela vous permet ainsi
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]
Indique la durée totale de la transition, 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]
Fonction indiquant à 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élais]
C'est 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).
Exemple concret
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:
