Different CSS Transitions on Mouse In and Mouse Out

Prior to CSS3 the most effective way to implement mouse hover animations was using JavaScript. Now that cross browser CSS3 transitions support has grown beyond being restricted to WebKit I have started experimenting more with transitions and quickly came across the problem of wanting to use a different transition effects on mouse in and mouse out events.

Mouse in and out transition

Initially looking at the syntax for this it doesn’t appear to be possible, however this can be done using a simple trick originally documented on Design Shack and CSS Tricks.

See the Pen Different CSS Transitions on Mouse In and Mouse Out by Wayne Moir (@waynemoir) on CodePen

The key to achieving the desired behaviour on mouse in and mouse out is to specify the mouse over transition in the hover state and the mouse out transition in the regular state.

Wayne Moir

User Experience Designer