Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Css transitions does not transition back smoothly when not yet finished

Css transitions does not transition back smoothly when not yet finished

Problem

  1. I've got a background image that changes to another image when :hover.
  2. I used transition to show this effect.
  3. 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.

Problem courtesy of: Charlessmori

Solution

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.

Solution courtesy of: Zoltan Toth

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Css transitions does not transition back smoothly when not yet finished

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×