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?

Solution 1:

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)