如何使用 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

有些代码目前看起来像 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/