如何用css3动画更改背景位置？

Question

可以说我有一个div元素，在position: 0%;背景我将如何改变到如position: 100%;的位置，但与悬停关键帧

我似乎无法正常使用关键帧，它永远不会奏效，我都最新的浏览器。

谢谢。

Answer 1

如果您只是想在悬停时为背景位置设置动画效果，则使用过渡而非关键帧动画更容易。看这个小提琴的例子：http://jsfiddle.net/hfXSs/

如果你想把它做成一个动画的额外努力，你必须将div的动画播放状态设置为'已暂停'并将其更改为'运行'悬停。看到这里暂停动画规范：http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

编辑：我很无聊，所以这里是一个使用关键帧动画，同样的事情：http://jsfiddle.net/wGRg5/

显然，拨弄了，当你没有悬停在这个问题div中动画暂停可能不是预期的效果。

Answer 2

Some Code，在这个时间点看起来像webkit。

.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; 
} 

途经：http://jsfiddle.net/hfXSs/

这里更多：http://css-tricks.com/parallax-background-css3/