通过关键帧的多个背景图像位置的动画适用于 Chrome 和 Safari，但不适用于 Firefox答案

【问题标题】：Animation of multiple background image positions via keyframes works in Chrome & Safari but not Firefox通过关键帧的多个背景图像位置的动画适用于 Chrome 和 Safari，但不适用于 Firefox
【发布时间】：2016-05-29 07:23:55
【问题描述】：

目标是创建一个无限滚动的两层视差背景。该效果在 Mac Chrome 和 Safari 中完美运行，但在 Firefox 中出现卡顿。任何想法为什么？谢谢！

<style>
  body {
    background-color: black;
  }
  #container {
    bottom: 0; 
    left: 0;
    position: absolute;
    right: 0; 
    top: 0; 
  }
  @-webkit-keyframes scroll {
    100% { 
      background-position: 0 0; 
    }
  }
  @keyframes scroll {
    100% { 
      background-position: 0 0; 
    }
  }
  .bg1 {
    -webkit-animation: scroll 2.5s linear infinite;
    animation: scroll 2.5s linear infinite;
    background-image: url(path/to/image);
    background-position: 0 -156px;
    background-size: 128px 156px;
    height: 100%;
    opacity: 0.5;
    position: fixed;
    width: 100%;
  }
  .bg2 {
    -webkit-animation: scroll 5s linear infinite;
    animation: scroll 5s linear infinite;
    background-image: url(path/to/image);
    background-position: 0 -78px;
    background-size: 64px 78px;
    height: 100%;
    opacity: 0.25;
    position: fixed;
    width: 100%;
  }
</style>

<body>
  <div id="container">
    <div id="bg1" class="bg1"></div>
    <div id="bg2" class="bg2"></div>
  </div>
</body>

【问题讨论】：

标签： css animation background-image background-position keyframe

【解决方案1】：

您的代码中没有任何 -moz- 属性。 chrome 和 safari 都支持 -webkit-。但是对于 Firefox，您应该在某些旧版本中使用 -moz-prefix。

【讨论】：

感谢您的贡献。我对caniuse.com 的解读是，当前版本的Firefox 不需要@keyframes 和animation 的Mozilla 供应商前缀（没有它，David Walsh 的代码运行良好）。添加它似乎没有什么区别：jsbin.com/cifig/2

【解决方案2】：

我能够绕过 Firefox 的引擎，而不是跟上重复背景的全窗口 div 的串联动画……而是切换到两个动画、图案化的全窗口 SVG。

因此，我没有在我的 CSS 中将 keyframe animations 添加到 divs，而是在我的 HTML 中使用了以下标记：

<svg id="parallax2" width="100%" height="200%" style="display: none;">
  <defs>
    <pattern id="pattern2" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="-40" y="-40" height="100" width="100" xlink:href="path/to/image"></image>
    </pattern>
  </defs>
  <rect width="100%" height="200%" fill="url(#pattern2)">
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 -50"
      to="0 50"
      dur="3750ms"
      repeatCount="indefinite"
    />
  </rect>
</svg>

<svg id="parallax1" width="100%" height="200%" style="display: none;">
  <defs>
    <pattern id="pattern1" patternUnits="userSpaceOnUse" height="200" width="200">
      <image x="-40" y="-40" height="200" width="200" xlink:href="path/to/image"></image>
    </pattern>
  </defs>
  <rect width="100%" height="200%" fill="url(#pattern1)">
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 -100"
      to="0 100"
      dur="3750ms"
      repeatCount="indefinite"
    />
  </rect>
</svg>

【讨论】：