Transition-behavior - Property CSS

Syntax diagram of transition-behavior.

Description of the transition-behavior property.

The property transition-behavior defines the behavior of a transition with respect to properties whose animation is of the discrete type.

Reminder: some properties can be animated smoothly and progressively. These are generally the properties whose value is a decimal number or a color.
On the other hand, properties that expect a predefined value change abruptly from one value to another when they are animated.

It's not always so simple. For example, the thickness of a border line can be thin, medium, or thick, but these predefined values are associated with numerical values: 1 pixel for thin, 3 pixels for medium, etc. As a result, the transitions can still be gradual.
On the other hand, the predefined values for line style (solid, dotted, etc.) are not associated with numerical values. In this case, the transition will not occur.

>Our example below shows the difference between discrete properties and properties that can be interpolated. To trigger the transition, a JavaScript code regularly modifies the thickness and style of the outline.

We also see that the discrete property changes value at the beginning of the transition. This is where the transition-behavior property comes into play: it causes a value change in the middle of the time allocated to the transition.
The example below shows a discrete property (text-align), which is the subject of a transition. The transition-behavior property receives, for the left example, the value normal and the value allow-discrete for the right example. In both cases, the cursor shows the progress of the transition.

Values for transition-behavior.

• transition-behavior: normal;

  Animations are not performed on properties whose animation is discrete. Which means that these properties change value from the beginning of the transition.

  A Javascript code periodically changes the style of this text.
  transition-behavior:normal;
• transition-behavior: allow-discrete;

  Animations are carried out on both properties whose animation is discrete and those whose animation is progressive. Naturally, non-animatable properties are never affected.

  A Javascript code periodically changes the style of this text.
  transition-behavior:allow-discrete;
• transition-behavior: initial; (normal) transition-behavior: inherit; transition-behavior: revert; transition-behavior: revertLayer; transition-behavior: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the transition-behavior property.

Being itself a property related to transitions, the property transition-behavior cannot be animated.

Manipulating the transition-behavior property programmatically.

Changing the value of transition-behavior with Javascript.

In JavaScript, here is how to change the value of transition-behavior. We see that JavaScript offers a syntax with the typical CSS notation, in kebab-case (a dash to separate words), and another syntax with the notation in camel-case (a capital letter to separate words).

let el = document.getElementById('id'); el.style['transition-behavior'] = 'allow-discrete'; // or let el = document.getElementById('id'); el.style.transitionBehavior = 'allow-discrete';

Retrieving the value of transition-behavior with Javascript.

The property must have been applied directly to the element itself via its style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['transition-behavior']; // or let el = document.getElementById('id'); let value = el.style.transitionBehavior;

Retrieving the computed value of transition-behavior.

The computed value is the one that results from the evaluation of the relative units and the possible consideration of inherited values. In all cases, the computed value is defined.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('transition-behavior');

Changing the value of transition-behavior with JQuery.


$('#id').css('transition-behavior', 'allow-discrete');
// or
$('#id').css('transitionBehavior', 'allow-discrete');


Retrieving the computed value of transition-behavior with JQuery.

let value = $('#id').css('transition-behavior');

Other code examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS.

Test yourself.

The buttons below apply the entered value to the property transition-behavior and then display either the value as it was applied, or the calculated value. In the case of transition-behavior, there will be no difference between these two results because all values accepted by transition-behavior are predefined values.

Browsers compatibility with transition-behavior.

The property transition-behavior is well recognized and handled by current browsers.
However, be careful with transitions on the display and content-visibility properties, which handle transitions poorly, even when transition-behavior has the value allow-discrete. See the directive @starting-style on this subject.

1

transition-behavior
property

Estimated overall support.

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

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

See Caniuse.com for more compatibility information.

Caniuse

Historic of the transition-behavior property.

• CSS Transitions - Level 2

  Level 2 of the specification on transitions adds the ability to apply a transition to a discrete property.
  A new at-rule @starting-style allows defining the starting values for property values. It is now possible to apply a transition to elements that go from the invisible state to the visible state.

  Regarding transition-behavior. Introduction of the transition-behavior property.
  

  September 05, 2023

  Working Draft.

  

  

  

See also, regarding transitions.

The CSS specifications published by the W3C are organized in modules. The property transition-behavior is part of the CSS Transitions, as well as the other properties listed below:

Properties:

transition

Group the different parameters of one or more transitions.

Transition-behavior

Defines the behavior of transitions on properties whose animation type is discrete.

transition-delay

Sets the amount of time to wait before the transition begins, counted from the time the property is changed.

transition-duration

Defines the duration of a transition, i.e. the time it takes to complete its transition.

transition-property

Defines the property(s) on which a transition should be applied.

transition-timing-function

A property that defines the easing function to be used during a transition.

At-rules: