Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 transition delay of specific attribute

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?

like image 826
test Avatar asked Mar 23 '12 13:03

test


People also ask

Which delay CSS property is used for transition effect?

The transition-delay property specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms).

How do you slow transform in CSS?

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.

How do you delay hover?

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.


1 Answers

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)

like image 194
noponies Avatar answered Sep 22 '22 12:09

noponies