Transition - Propriété CSS
Résumé des caractéristiques de la propriété transition
transition ne peut pas être animée.Per grammar : sérialisation dans l'ordre de la syntaxe.La saisie des valeurs peut se faire dans un ordre quelconque.
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éments 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 (Firefox 
ne fait pas évoluer progressivement la largeur de l'élément, on
constate simplement un temps de retard dans la mise à jour de la largeur de l'élément vert.
transition est une propriété résumée qui définit les valeurs des propriétés suivantes :
discrete.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 la 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;
Exemple d'animation de 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.
Accéder à la propriété transition par programme.
Avec Javascript, modifier la valeur de transition.
En Javascript, voici comment modifier les paramètres d'une transition, avec transition.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec la notation en camel-case.
let el = document.getElementById('id');
el.style['transition'] = 'width 1s linear 2s normal';
// ou
let el = document.getElementById('id');
el.style.transition = 'width 1s linear 2s normal';
Avec Javascript, lire la valeur de transition.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['transition'];
// ou
let el = document.getElementById('id');
let value = el.style.transition;
Avec Javascript, lire la valeur calculée de transition.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. A défaut ce sera la valeur initiale.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('transition');
Avec JQuery, modifier la valeur de transition.
JQuery permet également de modifier la valeur de la propriété transition.
$('#id').css('transition', 'width 1s linear 2s normal');
Avec Javascript, lire la valeur de transition.
let value = $('#id').css('transition');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété transition et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir dans quel ordre sont mémorisées (sérialisées) les différentes valeurs de transition.
On constate également que les millisecondes sont mémorisés en secondes.
Compatibilité des navigateurs avec transition.
Les transitions et donc la propriété transition sont prises en charge par tous les navigateurs actuels.
transition, qui fixe tous les paramètres d'une transition.transitions
transitionNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
QQ Browser
Safari sur IOS
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Opéra
Safari
Opéra mini
Histoire de la propriété transition.
-
Module CSS - Les transition - Niveau 1
Première spécification concernant les transitions et définition des propriétés correspondantes dont la propriété résuméetransition.
20 Mars 2009Document de travail.
-
Module CSS - Les transitions - Niveau 2
Ajout de la propriététransition-behavior. La propriété résuméetransitionaccepte cette nouvelle valeur dans sa syntaxe.05 Septembre 2023Document de travail.
Voir aussi : les transitions.
Les transitions sont décrites dans le module CSS Transitions. Pour faciliter vos recherches, voici les propriétés relatives aux transitions :
Propriétés :
discrete.