CSS3 动画与渐变 + bg 图像

Question

我有一个带有背景的 div，它同时具有透明 png 和线性渐变的背景图像。想要的效果是让图像在渐变保持静态的同时进行动画处理。在 Chrome 和 Safari 中，动画是这样工作的，但在 Firefox 和 IE 中，背景图像和渐变动画同时进行。

有没有一种方法可以在所有使用 CSS 的浏览器中获得所需的效果，而无需添加另一个 div？

http://jsfiddle.net/FprGA/

    @-webkit-keyframes bgscroll {
  0% { background-position: 0 0 ; }
  100% { background-position: 0 -230px; }
}

@keyframes bgscroll {
  0% { background-position: 0 0 ; }
  100% { background-position: 0 -230px; }
}

  .hero {
    display: block;
    height: 20rem;
    background-image: image-url("icons_grid.png"), -webkit-linear-gradient(to bottom, #646464, #323232);
    background-image: image-url("icons_grid.png"), -moz-linear-gradient(to bottom, #646464, #323232);
    background-image: image-url("icons_grid.png"), linear-gradient(to bottom, #646464, #323232);
    margin-bottom: 3rem;
    animation: bgscroll 30s infinite linear;
    -webkit-animation: bgscroll 30s infinite linear;
    border-bottom: .3rem solid #0b71b9;
  }

Answer 1

这为我完成了工作：

@keyframes bgscroll {
  0% { background-position: 0 0, 0 ; }
  100% { background-position: 0 -230px, 0; }  // added '0' position for 2nd background
}