Css transitions does not transition back smoothly when not yet finished
- I've got a background image that changes to another image when :hover.
- I used transition to show this effect.
- When transition finishes my old image reapears using the same transition when loses focus (Not hover).
Please see a working example (use chrome) : http://jsfiddle.net/WZqrY/3/
My problem: The second Transition effect does not apears when I take out the mouse half way into the first transition. You can try this moving the mouse into the image for one second and then moving it out of the image. How can I make this go smoothly?
Note: When I use colors instead of an image this effect does work in the way I pretend.
The background image transitions seem to be an unplanned "side effect" that's not fully functional and have a very limited support amongst the browsers
"This only works on Chrome 18+ and on Webkit Nightlies built in 2012 onwards. It seems to be a side effect of the CSS4 crossfading work" - source
For now your better bet will be the "2 images in a container" solution - http://jsfiddle.net/WZqrY/4/
This will work in all browsers that support transitions.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here