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
Post a Comment