Different CSS transition-delays for hover and mouseout?

CssTransitionsCss Transitions

Css Problem Overview


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.

Css Solutions


Solution 1 - Css

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

Solution 2 - Css

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;
}

Solution 3 - Css

/* 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" */

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMarcelView Question on Stackoverflow
Solution 1 - CssMarcelView Answer on Stackoverflow
Solution 2 - CssDan ManastireanuView Answer on Stackoverflow
Solution 3 - CssNebojša LožnjakovićView Answer on Stackoverflow