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

Posted 2023-03-06

【中文标题】如何使用 css3 动画更改背景位置？

【英文标题】：How do I change a background position with css3 animation?

【发布时间】：2011-11-08 17:59:30

【问题描述】：

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

我似乎无法正确使用关键帧，它永远无法正常工作，而且我拥有所有最新的浏览器。

谢谢。

【问题讨论】：

我可以建议您发布一些关键帧尝试中的示例代码，人们可以提供帮助

【参考方案1】：

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

如果您想付出额外的努力使其成为动画，则必须将 div 上的动画播放状态设置为“暂停”并在悬停时将其更改为“正在运行”。在此处查看有关暂停动画的规范：http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

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

显然，小提琴的问题是，当您不将鼠标悬停在 div 上时，动画会暂停，这可能不是您想要的效果。

【参考方案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/