jquery - CSS3 animation speed after hover not right in Webkit browsers -



jquery - CSS3 animation speed after hover not right in Webkit browsers -

its hard explain problem i'm trying solve. i've made simple jsfiddle help.

http://jsfiddle.net/8njmz/1/

#image { width:400px; height:400px; background-image:url('http://th07.deviantart.net/images3/pre/i/2004/142/8/b/tileable_checkered_floor.jpg'); background-size:150%; background-position:left center; transition:5s linear; -moz-transition:5s linear; -webkit-transition:5s linear; } #image:hover { background-position:right center; }

basically works i'd in firefox, when hover on background scrolls across, , if take mouse away if reverts @ same speed, if animation hadn't finished. in safari/chrome animates on same time, much slower if animation hadn't finished, if don't understand you'll see mean when see it. there simple prepare through css or going need write javascript prepare this?

thanks! alex

just add together transition time :hover class.

#image:hover { background-position:right center; -moz-transition:2s linear; -webkit-transition:2s linear; }

http://jsfiddle.net/8njmz/2/

jquery html css3 webkit background-position

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -