56

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.

Marcel
  • 27,922
  • 9
  • 70
  • 85

3 Answers3

130

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

Marcel
  • 27,922
  • 9
  • 70
  • 85
  • 1
    the problem I see with this is when you move the mouse away quickly it will get stuck in the middle until your delay is gone.. – apieceofbart Nov 14 '16 at 16:59
  • @apieceofbart you can work around that by conditionally applying another class that doesn't set a transition-delay in the ontransitionend listener – Oleg Vaskevich Mar 21 '18 at 02:52
  • @OlegVaskevich Actually I had a similar question here: https://stackoverflow.com/questions/40594931/reversible-transition-with-delay There was a beautiful answer given :) – apieceofbart Mar 23 '18 at 19:41
17

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;
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
Dan Manastireanu
  • 1,802
  • 1
  • 15
  • 18
  • Let's say there are two elements. On hover, i want the first one to appear before the second one; then when the mouse leave, i want the second one to disappear first, then the first one to disappear. Can' really get it… neither if it could be working – Ben Mar 26 '12 at 09:52
  • @Ben Post a question and I'll take a look at it. Also show some html. I think you should have different animations on each element. In the hover anim A's delay should be less than B's delay. On non hover animation it should be reversed. PS: I'm no expert with these... I just fiddled until it worked :) – Dan Manastireanu Mar 27 '12 at 11:03
4
/* 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" */
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Nebojša Ložnjaković
  • 41
  • 1
  • the note about adding the "s" to the `0` is super important. I was just bitten by it but figured it out. +1 – Sgnl Aug 07 '17 at 18:56