Define delay for each property in the transition shorthand
You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.
If you have a few properties that change with a transition
, you can define a transition-delay
for each of them, using the transition
shorthand and separating each property with a comma.
- Code language
- css
button:hover {
transition: background 200ms linear, color 200ms linear 200ms,
transform 500ms cubic-bezier(0.4, 0, 0.7, 1.8) 300ms, border-color 300ms cubic-bezier(
0.4,
0,
0,
1.1
) 600ms;
}
The order looks like this:
- Code language
- text
/* With timing function */
transition: property duration timingFunction delay;
transition: color 200ms linear 200ms;
/* Without timing function */
transition: property duration delay;
transition: color 200ms 200ms;
You can make some pretty cool state changes by adding some space between each change.
See the Pen Demo: separate delays for each transitioned property by Andy Bell (@piccalilli) on CodePen.