Transition - Property CSS

Description of the transition property.

A transition is an animation that occurs when the value of a property is set or changed. The shift from the old value to the new one then happens gradually.

Here is an example of a transition: the two elements below have a width set to 20vw, which is approximately one fifth of the screen width. By abruptly changing the width of your browser window, you will notice that the first element (the blue one) reacts instantly, while the width of the second element gradually changes toward its new value (Firefox   does not gradually change the width of the element; we simply observe a delay in updating the width of the green element).

transition is a summarized property that defines the values of the following properties:

transition-property :

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

transition-duration:

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

transition-timing-function :

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

transition-delay:

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

transition-behavior:

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

Transitions on multiple properties can be defined by separating them with commas (see the example below).

For a transition to activate, it is necessary for something outside of CSS to change the value of a property (the user or a Javascript code, for example). To obtain a property that evolves autonomously from one value to another, see the possibilities of animation.

Special case of discrete properties.

A discrete property only accepts predefined values. For example, the property text-align only accepts values like left, right, center, etc. It is not possible to interpolate on these values as one would, for example, for numeric values or colors. The animation of these properties thus jumps abruptly from one value to another.

By default, the transition does not occur on discrete properties (this is a difference between animations and transitions). In other words, discrete properties switch instantly to their new state right at the beginning of the transition. But the property transition-behavior (level 2 of the specification on CSS Transitions) allows this behavior to be changed: discrete properties change value in the middle of the transition.

Multiple Transition.

It is possible to define several transitions on the same element. This is the case when it is necessary to animate multiple properties. Each of the properties related to transitions can then have several values separated by commas.

Example: the block below has two transitions defined, one on its width, and one on its height, with different durations. A Javascript code changes these two properties every 5 seconds.

The values apply to the transitions in the order in which they were listed by the transition-property property, according to the following rules:

• The property that is used as a reference to count the transitions is transition-property.
• If the other properties have the same number of values, each of these values applies to a transition, in order.
• If some properties have more values than transitions listed by transition-property, the excess values are ignored.
• If some properties have fewer values than transitions listed by transition-property, the browser assigns the values by looping over those that are provided. In the extreme case, if only one value is provided, it applies to all transitions.

Example. The code below is to be understood in the following way:

• Two transitions are defined, one on the left margin and the other on the right margin.
• The duration for the transition on the left margin is 3 seconds, that for the transition on the right margin is 5 seconds.
• These two transitions will have a linear progression.
• The 1-second delay before starting is applied to the transition on the left margin, the 2-second one corresponds to the transition on the right margin. Finally, the 5-second delay will not be applied to any transition. It will be ignored.
• With the short-hand property, theses rules are not necessarily respected.

Animation of the transition property.

The property transition cannot be animated. The same applies to all properties related to transitions.

Manipulating the transition property programmatically.

With Javascript, change the value of transition.

In Javascript, here is how to modify the parameters of a transition, with transition. We see that Javascript offers a syntax with the typical CSS notation, in kebab-case, and another syntax with the notation in camel-case.

let el = document.getElementById('id'); el.style['transition'] = 'width 1s linear 2s normal'; // or let el = document.getElementById('id'); el.style.transition = 'width 1s linear 2s normal';

With Javascript, read the value of transition.

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']; // or let el = document.getElementById('id'); let value = el.style.transition;

With Javascript, read the computed value of transition.

The computed value is the one that results from the evaluation of the inheritance cascade. Failing that, it will be the initial value.

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

With JQuery, change the value of transition.

JQuery also allows you to modify the value of the property transition.


$('#id').css('transition', 'width 1s linear 2s normal');


With Javascript, read the value of transition.

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

Test it yourself.

The buttons below apply the entered value to the property transition and then display either the value as it was applied, or the calculated value. This second option allows you to see in which order the different values of transition are stored (serialized). It is also noted that milliseconds are stored in seconds.

Browsers compatibility with transition.

Transitions and therefore the property transition are supported by all current browsers.

1

Transitions
support

2

transition
property

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

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

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the transition property.

• CSS Transitions - Level 1

  Normally, when a property changes of value, its display on the screen is immediate. This specification module describes how to progressively change properties from one value to another over a given time. In other words, how to gradually move from one state to another.
  However, an external event is needed to trigger the change in property values (JavaScript code, user action, etc.). In this sense, transitions differ from animations, which can run independently of any external action.

  Regarding transition. First specification concerning transitions and definition of the corresponding properties including the shorthand property transition.
  

  March 20, 2009

  Working Draft.

  

  

  

• 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. Added transition-behavior property. The transition shorthand property accepts this new value in its syntax.
  

  September 05, 2023

  Working Draft.

  

  

  

See also: transitions.

The transitions are described in the module CSS Transitions. To make your research easier, here are the properties related to the transitions:

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: