Transition-delay - Property CSS
Summary of characteristics of the transition-delay property
0sNot animable: the transition-delay property cannot be animated.Per grammar: serialization in the order of syntax.Syntax diagram of transition-delay.
transition-delay property.The links in the diagram provide more details about the values.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
durationis a numeric value followed by one of CSS units of duration.- The syntax can be repeated several times, separated by commas.
Description of the transition-delay property.
Sets a wait time before the transition starts.
A transition consists of gradually changing a property from one value to another. The transition is triggered when a new value is assigned to the property.
For a general overview of transitions, refer to the shorthand property transition.
The waiting time defined by transition-delay is added to the normal duration of the transition. It therefore does not reduce the latter.
Unless transition-delay receives a negative value, in which case the animation is not played fully and it runs over a shorter duration.
Values for transition-delay.
- transition-delay: 2s;
The transition effect starts after the indicated duration. A positive or negative number, followed by one of CSS units of duration.
The default value is
0: the transition starts as soon as the animated property is changed.If the duration is negative, the transition effect starts immediately but the first part of the transition is not animated. If this negative value is greater than the duration of the transition, the transition effect is canceled.
- transition-delay: 2s, 1s;
When multiple transitions have been defined, it is possible to apply different delays to them by listing the values, separated by commas.
Refer to the page multiple transitions for more information on multiple transitions.
- transition-delay: initial; (
0s) transition-delay: inherit; transition-delay: revert; transition-delay: revertLayer; transition-delay: unset;See the following pages for more details:
initial,inherit,revert,revert-layer,unset.
Animation of the transition-delay property.
Like all properties related to animations or transitions, transition-delay cannot be animated.
Simulator.
A 2-second transition has been set on the left margin of the blue block below.
The simulator allows you to adjust the value of transition-delay.
The "Start" button changes the value of the left margin, which triggers the transition.
You can try a negative duration for the wait time, but it must remain between 0 and -2s, otherwise the transition does not happen at all.
Browsers compatibility with transition-delay.
Transitions and the property transition-delay are well supported by current browsers.
transition-delay which defines a waiting time before the transition starts.support
transition-delayproperty
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
Historic of the transition-delay 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.Regardingtransition-delay. First specification concerning transitions, and definition of corresponding properties.
March 20, 2009Working 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-styleallows 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.Regardingtransition-delay. No change to thetransition-delayproperty.September 05, 2023Working Draft.
Voir aussi : les transitions.
The transitions are described in the specification CSS Transitions. To facilitate your research, here are the properties related to transitions:
Properties:
discrete.