Different CSS transition-delays for hover and mouseout?

Question

Is it possible to use CSS3 transitions with a different delay switching between "states"? For example, I'm trying to make an element immediately higher upon hover then on 'mouseout' to wait a second before sliding back to the element's initial height.

Demo page: jsfiddle.net/RTj9K (hover black box in top-right corner)

CSS: #bar { transition:.4s ease-out 0, 1s; }

I thought the timings on the end related to delay but it doesn't seem to be working the way I'd imagined.

Answer 1

If you want different CSS transition delays on hover and mouseout, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0 but on mouseout the transition is delayed by 1s.

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

You can find the full CSS in my question's updated demo below. I've used the shorthand transition property, the order of the values are:

transition:<property> <duration> <timing-function> <delay>;

Answer Demo: http://jsbin.com/lecuna/edit?html,css,output

Answer 2

Here is a simplified JSFiddle example. Basically you need the transition-delay property:

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}

Answer 3

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

Just to say that this won't work if you do not enter 's' (seconds) symbol, so:

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */