How do I change a background position with css3 animation?

Question

Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover

I can't seem to use keyframes properly, it never works and I have all the latest browsers.

Thanks.

Answer 1

If you just want to animate background position on hover it's a lot easier to use a transition instead of keyframe animations. See this fiddle for an example: http://jsfiddle.net/hfXSs/

If you want to put in the extra effort of making it an animation you'll have to set the animation-play-state on the div to 'paused' and change it to 'running' on hover. See the spec on pausing animations here: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

EDIT: I was bored so here's the same thing using keyframe animations: http://jsfiddle.net/wGRg5/

Obviously, the fiddle has the problem that when you aren't hovering over the div the animation pauses which is probably not the desired effect.

Answer 2

Some Code, looks 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 here: http://css-tricks.com/parallax-background-css3/