Transition-behavior - Propriété CSS

transition-behavior

Résumé des caractéristiques de la propriété transition-behavior

Description rapide
Définit le comportement des transitions sur les propriétés qui sont animables de façon discrete.
Statut
Standard
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété transition-behavior ne peut pas être animée.
Module W3C
Module CSS - Les transitions
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de transition-behavior.

transition-behavior - Syntax DiagramSyntax diagram of the transition-behavior CSS property. See stylescss.free.fr for details. normal normal allow-discrete allow-discrete , ,transition-behavior:;transition-behavior:;
Schéma syntaxique de la propriété transition-behavior
Les liens du schéma donnent accès à plus de détails

Description de la propriété transition-behavior.

La propriété transition-behavior définit le comportement d'une transition par rapport aux propriétés dont l'animation est du type discrete.

Rappel : certaines propriétés peuvent être animées de façon fluide et progressive. Ce sont généralement les propriétés dont la valeur est un nombre décimal ou une couleur.
A l'inverse les propriétés qui attendent une valeur prédéfinie évolue de façon brutale d'une valeur à une autre lorsqu'elles sont animées.

Ce n'est pas toujours aussi simple. Par exemple l'épaisseur d'un trait de bordure peut être thin, medium ou thick, mais ces valeurs prédéfinies sont associées à des valeurs numériques : 1 pixel pour thin, 3 pixels pour medium, etc. Il en résulte que l'animation peut être progressive.
Par contre les valeurs prédéfinies pour le style de trait (solid, dotted, etc.) ne sont pas associées à des valeurs numériques. Dans ce cas, l'animation sera discrete.

L'épaisseur du contour peut être animée de façon progressive.
Par contre l'animation du style de trait est du type discrete.

Valeurs pour transition-behavior.

  • transition-behavior: normal;

    Les animations ne sont pas exécutées sur les propriétés dont l'animation est discrete.

  • transition-behavior: allow-discrete;

    Les animations sont exécutées aussi bien sur les propriétés dont l'animation est discrete que sur celles dont l'animation est progressive. Bien entendu les propriétés non animables ne sont jamais concernées.

Valeurs globales
(communes à toutes les propriétés)

transition-behavior: initial (normal) transition-behavior: inherit transition-behavior: revert transition-behavior: revertLayer transition-behavior: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Animation de la propriété transition-behavior.

Étant elle-même une propriété relative aux transitions, la propriété transition-behavior ne peut pas être animée.

Prise en charge par les navigateurs (compatibilité).

La propriété transition-behavior est bien reconnue et traitée par les navigateurs actuels.
Attention cependant aux propriétés display et content-visibility qui supportent mal les transitions, même lorsque transition-behavior a la valeur allow-discrete.

1
Propriété
transition-behavior
Estimation de la prise en charge globale.
87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Samsung Internet

Safari

Safari sur IOS

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Évolution de la propriété transition-behavior.

Voir aussi, au sujet des transitions.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriétés transition-behavior fait partie du module CSS Transitions, ainsi que les autres propriétés listées ci-dessous :

Propriétés :

transition
Regroupe les différents paramètres d'une ou plusieurs transitions.
transition-delay
Définit le temps d'attente avant que la transition ne commence, compté à partir de la modification de la propriété (ou du chargement de la page).
transition-duration
Définit la durée d'une transition, c'est à dire le temps qu'elle met pour se dérouler entièrement.
transition-property
Définit la ou les propriétés sur lesquelles doit s'appliquer une transition.
transition-timing-function
Propriété définissant la fonction d'accélération à utiliser pendant une transition.