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

Question

假设我有一个div元素,背景position: 0%;知道如何将位置更改为例如position: 100%;但悬停时使用关键帧

我似乎无法正确使用关键帧,它永远不会工作,我拥有所有最新的浏览器.

谢谢.

Answer 1

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

如果你想付出额外的努力使它成为动画,你必须将div上的animation-play-state设置为'paused'并在悬停时将其更改为'running'.请参阅此处暂停动画的规范:http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

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

显然,小提琴有一个问题,当你没有盘旋在div上时,动画暂停,这可能不是理想的效果.

Answer 2

某些代码,仅在此时看起来像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/