Css transition delay does not work with background color

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

+7
css3
source share
3 answers

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/

+17
source share

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

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

More here

+1
source share

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; } 
0
source share

All Articles