如何让背景无限移动？答案

【问题标题】：How to make background move infinitely?如何让背景无限移动？
【发布时间】：2016-04-24 15:51:41
【问题描述】：

假设我有pic.png 的重复背景，就像这样......

body {
    background-image: url(pic.png);
}

我想让它无缝向某个方向移动，比如以给定的速度向东北方向移动，无限。我见过w3 schools 用动画来做，但它会逐渐减慢和加快，更不用说来回移动了。

还有一件事，（我认为它会自动执行此操作，但我会解释它），当它移动时，我不想看到空白的空虚，我想看到背景与它重复 随着它的移动。

【问题讨论】：

@MichaelSchwartz 你有没有阅读你提供的那个链接上的内容。虽然 MDN 应该是首选 w3schools 不再是以前的完整混乱，

标签： css animation webkit

【解决方案1】：

编织： http://kodeweave.sourceforge.net/editor/#55eb58488c64b5c4ef5b25a64a8c4f3b

简单！设置你的背景并给它一个animation property。

body {
  background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
  background-size: 261px;
  animation: moveIt 10s linear infinite;
}

animation: moveIt 10s linear infinite;

我将关键帧函数命名为 moveIt。
该功能的延迟为10秒。
您可以为animation-timing-function 传递许多值，我只是将我的设置为linear，因此我的动画保持稳定。因此最终不会加速或减速。

然后在你的关键帧函数中给它一个名字并设置在哪里以及如何

现在，关键帧函数通过传递 to、from 或任何一个百分比来工作。

在这种情况下，我使用 to 和 from 尽管 0% 和 100% 也可以正常工作。

@keyframes moveIt {
  from {background-position: bottom left;}
  to {background-position: top right;}
}

注意：我的weave 使用Prefix-free，这样您就不必担心供应商前缀。不过也有Autoprefixer，您可能需要考虑。

body {
  background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
  background-size: 261px;
  animation: moveIt 10s linear infinite;
}
@keyframes moveIt {
  from {background-position: bottom left;}
  to {background-position: top right;}
}

【讨论】：

【解决方案2】：

您需要的基本上就是您链接的内容。您需要一个图案图像，然后制作无限动画，但在关键帧 100% 处移动与图像尺寸一样多的像素。

如果您的图片是 32x32px，并且您希望它向上和向右移动：

@keyframes mymove {
    100% {background-position: 32px -32px;}
}

您还需要将缓动设置为线性以防止减速：

animation-timing-function: linear;

【讨论】：