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?

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)

li {
  transition-duration: 0.4s, 0.4s, 0.4s, 0.4s, 0.4s;
  transition-delay: 0s, 0s, 0s, 0s, 0s;
  transition-property: transform, opacity, visibility, color, background-color;
}

li:nth-of-type(1) {
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}

li:nth-of-type(2) {
  transition-delay: 0.1s, 0.1s, 0.1s, 0s, 0s;
}