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

Answer 1

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