How to change background position using css3 animation?

Question

Suppose I have a div element with a background in position: 0%; , how to change the position, for example, position: 100%; but with keyframes on hover

I cannot use keyframes correctly, it never works, and I have all the latest browsers.

Thanks.

Answer 1

If you just want to animate the background position on hover, it's much easier to use a transition instead of animating keyframes. See this script for an example: http://jsfiddle.net/hfXSs/

If you want to make additional efforts to create an animation, you will need to set the animation state in the div to “paused” and change it to “running” on hover. See the animation pause specification here: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

EDIT: I was bored, so here, using the keyframe animation: http://jsfiddle.net/wGRg5/

Obviously, the violin has a problem: if you do not hover over the div, the animation pauses, which is probably not the desired effect.

Answer 2

Some codes look like webkit only at this point in time.

 .box { display:block; height:300px; width:300px; background:url('http://lorempixum.com/300/300') no-repeat; background-position:-300px; -webkit-transition:background-position 1s ease; } .box:hover{ background-position:0px; } 

Via: http://jsfiddle.net/hfXSs/

More details here: http://css-tricks.com/parallax-background-css3/