at the moment I am styling a textbox by changing its background-color and font color on hover :
transition: background-color 1s, color 1s;
I would now like to change the color after the background color by using transition-delay. The problem is that transition delay does not take the PROPERTY (i.e. color) that I would like to delay. Is there any way to delay specific attributes only?
The transition-delay property specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms).
The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end. ease-in - specifies a transition effect with a slow start.
You can use transitions to delay the :hover effect you want, if the effect is CSS-based. this will delay applying the the hover effects ( background-color in this case) for one second.
Transition Delay is property specific.
For instance
transition: background-color 1s linear 2s, color 1s; transition: property name | duration | timing function | delay
When using shorthand, it seems as though you need to specify the timing function as well.
(Source)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With