Different speeds for CSS transition

Question

I am using css transitions to animate the height of a div. What I would like to do is have a slow transition in and a fast transition out.

It is for a dropdown menu and although the drop down works great when you hover over a menu item initially, when you move along to the next item I want the previous dropdown to snap back almost immediately.

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}
div:hover {
  width: 300px;
}

<div></div>
<p>Hover over the div element above, to see the transition effect.</p>

Is there a way to set a different duration for the in and out transitions?

Answer 1

Place the slower transition on the div:hover and the faster transition on the div itself. When the :hover state is left, the divs transition will take over.

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 0.2s;
}
div:hover {
  width: 300px;
  transition: width 2s;
}

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>