Different speeds for CSS transition

css, css-transitions

Solution

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>

Problem

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?

Original source