Css transition delay does not work with background color

Question

I'm trying to delay 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 over a div , the animation starts immediately, without delay. When I check the element, I see that there is a css transition-delay property. Any suggestion, why does this not work? (I use chrome)

Demo

Answer 1

You need to declare your transition-delay after transition .

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

Or declare it in one expression:

 transition: background-color 1s ease 5s; 

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

Answer 2

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

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

More here

Answer 3

The way this is done is the transition in the reverse order, that is, when the div in which the transition occurs is not possible. Try the return way:

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