Different Transitions for Hover On / Hover Off

In other words, “Different transitions on mouseenter and mouseleave” as those are the DOM events that happen, but we’re not using JavaScript here, we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

This is a simple trick. You set transitions on both states, like this:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

When you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates.

And now, here an offensively lame examples that you should never use:

View Demo