Different speed fading out

I am starting to practice with some CSS3 animations. I have some example code here: http://jsfiddle.net/chricholson/z7Bg6/67/

I wonder, how can I specify a longer duration for the animations when un-hovering. At the moment, it would appear to take the same timings and settings used to apply styles to remove them when I hover. I would like to set it so that when un-hovering, it takes a lot longer (exaggerated to som开发者_如何学运维ething like 2 seconds) for the background colour to fade back to normal, but still taking 0.1s to fade when hovering.

It may seem counter-intuitive, but you would actually apply the longer duration to your regular selector code and the shorter duration to your :hover and :focus selector code.

You can essentially think of the normal style as what will happen when un-hovering/focusing.

See this updated JSFiddle.