CODEWITHSUNDEEP
css
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

css transition delay not working with background-color

I'm trying to delay an animation

Here is my css:

div {
    background-color: #000; 
    height: 100px;
    transition-delay: 5s;
    transition: background-color 1s ease;
}

div:hover {
    background-color: #fff;
}

When I hover my mouse over the div the animation starts immediately, no delay. When I inspect the element I see that there is a css property transition-delay Any suggestion why this doesn't work ? (I'm using chrome)

DEMO

Upvotes: 11

Views: 12811

Answers (3)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

You need to declare your transition-delay after the transition.

div {
    background-color: #000; 
    height: 100px;
    transition: background-color 1s ease;
    transition-delay: 5s;
}

Or declare it in a single statement:

transition: background-color 1s ease 5s;

http://jsfiddle.net/n7Ne9/5/

Upvotes: 28

eikooc
eikooc

Reputation: 2578

Here you go a working example: http://jsfiddle.net/n7Ne9/4/

transition-property:background-color;
transition-duration:1s;
transition-delay:2s;

Read more here

Upvotes: 1

Don
Don

Reputation: 110

The way ure doing is for transition in the reverse way i.e when is unhover the div that is wen the transition occurs. Try the opposite way: 

div {
    background-color: #000; 
    height: 100px;

}

div:hover {
    background-color: #fff;
    transition-delay: 5s;
    transition: background-color 1s ease;
}

Upvotes: 0

Related Questions