css transition delay not working with background-color

Question

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

Answer 1

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/

Answer 2

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

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

Read more here