CODEWITHSUNDEEP
csscss-transitions
test
test

Reputation: 2618

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?

Upvotes: 74

Views: 58395

Answers (3)

ekene
ekene

Reputation: 301

The good news is that you can configure transition parameters i.e. transition-delay, transition-duration etc. for a specific css property. The sad news is that you cannot specify different parameters for different css properties on the same element. For example, this won't work:

.elem {
    transition: background-color 2s 0.5s ease; // want background-color to transition differently
    transition: opacity 3s 1.5s ease;          //this unfortunately overrides the previous line
}

In that case I would suggest using animations with @keyframes. The code is a bit more elaborate but then you can apply timing, duration, etc. more liberally.

Upvotes: -1

Redwan Hussain
Redwan Hussain

Reputation: 51

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;
}

Upvotes: 4

noponies
noponies

Reputation: 2726

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)

Upvotes: 138

Related Questions