Defines how long the transition has to wait before starting.
default transition-delay: 0s;
The transition will wait zero seconds, and thus start right away.
transition-delay: 1.2s;
You can use decimal values in seconds with the keyword s.
transition-delay: 2400ms;
You can use milliseconds instead of seconds, with the keyword ms.
transition-delay: -500ms;
You can use negative values: the transition will start as if it had already been playing for 500ms.
Defines how long the transition lasts.
default transition-duration: 0s;
The transition will last zero seconds, and is thus instant.
transition-duration: 1.2s;
You can use decimal values in seconds with the keyword s.
transition-duration: 2400ms;
You can use milliseconds instead of seconds, with the keyword ms.
Defines which properties will transition.
default transition-property: all;
The element will transition all properties:
transition-property: none;
The element will transition no property: the transition is thus instant.
transition-property: background;
The element will only transtion the background property.
transition-property: color;
The element will only transtion the color property.
transition-property: transform;
The element will only transtion the transform property.
Defines how the values between the start and the end of the transition are calculated.
default transition-timing-function: ease;
The transition starts slowly, accelerates in the middle, and slows down at the end.
transition-timing-function: ease-in;
The transition starts slowly, and accelerates gradually until the end.
transition-timing-function: ease-out;
The transition starts quickly, and decelerates gradually until the end.
transition-timing-function: ease-in-out;
Like ease, but more pronounced.
The transition starts quickly, and decelerates gradually until the end.
transition-timing-function: linear;
The transition has a *constant speed.
transition-timing-function: step-start;
The transition jumps instantly to the final state.
transition-timing-function: step-end;
The transition stays at the initial state until the end, when it instantly jumps to the final state.
transition-timing-function: steps(4, end);
By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.
Shorthand property for transition-property transition-duration transition-timing-function and transition-delay.
Only transition-duration is required.
transition: 1s;
transition-duration is set to 1stransition-property defaults to alltransition-timing-function defaults to easetransition-delay defaults to 0stransition: 1s linear;
transition-duration is set to 1stransition-property defaults to alltransition-timing-function is set to lineartransition-delay defaults to 0stransition: background 1s linear;
transition-duration is set to 1stransition-property is set to backgroundtransition-timing-function is set to lineartransition-delay defaults to 0stransition: background 1s linear 500ms;
transition-duration is set to 1stransition-property is set to backgroundtransition-timing-function is set to lineartransition-delay is set to 500mstransition: background 4s, transform 1s;
You can combine multiple properties with their own transition duration.