为什么这个动画失败了？答案

【问题标题】：Why is this failing to animate?为什么这个动画失败了？
【发布时间】：2014-02-04 09:29:02
【问题描述】：

$( document ).ready(function() {
$('.overlay-1').css({backgroundPosition:'30% 100%'});

var to;

function infinite(){
to = setTimeout(function(){
$('.overlay-1').animate({backgroundPosition:"30% 2000%"},12000,function(){
    $('.overlay-1').css({backgroundPosition:'30% 100%'});
  infinite();
    });    
  });
}
infinite();


});

为什么无法为背景图像设置动画？它本来是一个无限滚动的背景图像，但没有任何动静？

干杯，山姆

【问题讨论】：

也许 CSS 动画在这种情况下也可以工作。
如何循环播放 CSS 动画？
我也对此感兴趣，我会尝试写第二个答案。

标签： jquery css animation

【解决方案1】：

在动画函数中需要单独的背景位置，jquery 不能像这样处理多个 css 参数。例如：

$('.overlay-1').animate({
    'background-position-x': '30%',  
    'background-position-y': '2000%'},12000, function(){});

编辑：只是认为这在 FF 中不起作用。试试这个火狐： jquery animate background-position firefox

【讨论】：

谢谢。 CSS 是否也需要单独的背景位置？我的 jQuery 还处于早期阶段，我认为您不能稍微扩展您的答案，可以吗？干杯，山姆
我认为不会，因为在大多数浏览器中 CSS 属性 background-position 被解析为 background-position-x background-position-y 属性。其中 X 是水平轴，Y 是垂直轴。然而，Firefox 并不为每个轴使用单独的属性。这就是为什么这在 Firefox 中不起作用的原因。
说实话，我个人会使用 CSS 动画（请参阅我的其他答案）。它只是让我感觉更健壮。

【解决方案2】：

您可以使用 CSS3 动画。请注意，并非所有浏览器都支持它。您可以在此处查看浏览器采用情况：http://caniuse.com/css-animation。

对于像 IE9 这样的浏览器，您可以使用静态图像来逐渐降低旧浏览器的用户体验。

我写了一个关于如何使用 CSS 为背景位置设置动画的小示例，我将 Google 徽标作为背景图像从上到下无限循环：http://jsfiddle.net/xMMct/

在您的情况下，您可以自行定位背景图像，使其看起来在无限滚动。

CSS代码：

.background {
    background-image: url(https://www.google.nl/images/srpr/logo11w.png);
    width: 200px;
    height: 500px;
    background-size: 200px auto;
    background-repeat: no-repeat;
    background-position: 0% -20%;
    animation:bg 5s linear infinite;
    -webkit-animation:bg 5s linear infinite;
}

@keyframes bg
{
   from {background-position: 0% -20%;}
   to {background-position: 0% 120%;}
}

@-webkit-keyframes bg /* Safari and Chrome */
{
   from {background-position: 0% -20%;}
   to {background-position: 0% 120%;}
}

这是另一个背景似乎在无限滚动的小提琴（请原谅每 5 秒跳过一次，值并不完美）http://jsfiddle.net/xMMct/1/

编辑：更好的例子（没有跳过）http://jsfiddle.net/xMMct/2/

【讨论】：