transition - Propriété CSS
Résumé des caractéristiques de la propriété transition
transition
ne peut pas être animée.Description de la propriété transition
.
Une transition est une animation qui se produit lorsque la valeur d'une propriété est définie ou modifiée. Le passage de l'ancienne valeur à la nouvelle se fait alors de façon progressive.
Voici un exemple de transition : les deux élément ci-dessous ont une largeur définie à 20vw
, soit approximativement un cinquième de la largeur de l'écran.
En changeant brutalement la largeur de la fenêtre de votre navigateur, vous constaterez que le premier élément (le bleu) réagit instantanément, tandis que la
largeur du deuxième élément évolue progressivement vers sa nouvelle valeur.
transition
est une propriété résumée qui définit les valeurs des propriétés suivantes :
transition-property
: définit la propriété qui sera soumise à la transition.transition-duration
: la durée de la transition. Cette valeur doit obligatoirement être définie pour que l'effet de transition soit visible.transition-timing-function
: une fonction de calcul qui définit une exécution non linéaire de la transition.transition-delay
: un temps d'attente avant que l'effet de transition ne commence.
Des transitions sur plusieurs propriétés peuvent être définies en les séparant par des virgules (voir l'exemple ci-dessous).
Pour qu'une transition s'active, il est nécessaire que quelque chose d'extérieur à CSS modifie la valeur d'une propriété (l'utilisateur ou un code Javascript par exemple).
Pour obtenir une propriété qui évolue de façon autonome d'une valeur à une autre, voyez les possibilités de animation
.
Transitions multiples.
Il est possible de définir plusieurs transitions sur un même élément. C'est le cas lorsqu'il est nécessaire d'animer plusieurs propriétés. Chacune des propriétés relatives aux transitions peut alors comporter plusieurs valeurs séparées par des virgules.
Exemple : le bloc ci-dessous a deux transitions définies, une sur sa largeur, et une sur sa hauteur, avec des durées différentes. Un code Javascript modifie ces deux propriétés toutes les 5 secondes.
Les valeurs s'appliquent aux transitions dans l'ordre où elles ont été énumérées par la propriété transition-property
, en fonction des règles suivantes :
- La propriété qui sert de référence pour dénombrer les transitions est
transition-property
. - Si les autres propriétés ont un nombre de valeurs identiques, chacune de ces valeurs s'applique à une transition, dans l'ordre.
- Si certaines propriétés ont plus de valeurs que de transitions énumérées par
transition-property
, les valeurs excédentaires sont ignorées. - Si certaines propriétés ont moins de valeurs que de transitions énumérées par
transition-property
, le navigateur affecte les valeurs en bouclant sur celles qui sont fournies. Dans le cas extrême, si une seule valeur est fournie, elle s'applique à toutes les transitions.
Exemple. Le code ci-dessous est à comprendre de la façon suivante :
- Deux transitions sont définies, une sur la marge gauche et l'autre sur la marge droite.
- La durée pour la transition sur la marge gauche est de 3 secondes, celle pour la transition sur la marge droite est de 5 secondes.
- Ces deux transitions auront une progression linéaire.
- Le délai avant démarrage de 1 seconde est appliqué à la transition sur la marge gauche, celui de 2 secondes correspond à la transition sur la marge droite. Enfin, le délai de 5 secondes ne sera appliqué à aucune transition. Il sera ignoré.
transition-property: margin-left, margin-right;
transition-duration: 3s, 5s;
transition-timing-function: linear;
transition-delay: 1s 2s 5s;
Animation de la propriété transition
.
La propriété transition
ne peut pas être animée. Il en est de même pour toutes les propriétés relatives aux transitions.
Manipulation de la propriété transition
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
Puisqu'il s'agit de transitions, l'effet ne sera visible que au moment de modifier la valeur de la propriété concernée par la transition.
Voici comment modifier, avec Javascript, la valeur de transition
pour un élément el
.
Deux syntaxe existent : la première utilise une notation en tableau, avec des crochets. La deuxième est une notation objet.
function setTransition(el) {
el.style['transition']='width 1s linear 0s';
}
function setTransition(el) {
el.style.transition='width 1s linear 0s';
}
Voici deux exemples de code Javascript pour lire la valeur de transition
.
La propriété doit avoir été définie directement sur l'élément lui-même et pas par l'intermédiaire d'un sélecteur.
La valeur de la transition est renvoyée telle qu'elle a été définie, dans le même format et les mêmes unités.
function getTransition(el) {
return el.style['transition'];
}
function getTransition(el) {
return el.style.transition;
}
Exemple de code Javascript pour lire la valeur calculée de transition
. La valeur est retournée avec les unités converties en secondes.
function getTransition(el) {
return window.getComputedStyle(el).getPropertyValue('transition');
}
Le premier code JQuery ci-dessous modifie la valeur de la propriété transition
. Le deuxième code lit la valeur calculée de la propriété.
function setTransition(el) {
$(el).css('transition','width 1s linear 0s');
}
function getTransition(el) {
return $(el).css('transition');
}
Prise en charge par les navigateurs (compatibilité).
Les transitions et donc la propriété transition
sont prises en charge par tous les navigateurs actuels.
transition
.
transition
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que transition
.
Les spécifications CSS éditées par le W3C sont organisées en modules. transition
fait partie du Module CSS - Les transitions (CSS Transitions). Les définitions suivantes sont également décrites dans ce même module.