javascript - 如何通过纯 CSS 使充满 svg 的背景动画化？

Question

是否有任何纯 CSS 方法可以创建这样的效果？为了更容易理解，我用 JavaScript 制作了一个演示来实现它。

http://jsfiddle.net/78h823dd/3/

function renderHandler() {
  x+=offset;
  $("#debug").val(x);
  $('.test').css('background-position', x.toString() + 'px 0');
}

Answer 1

您可以使用以下 CSS 轻松地为其设置动画:

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 50%; }
}

并将其添加到该类的 css 中:

.test {
  /* rest of code */
  animation: animatedBackground 5s linear infinite;
}

将 5s 更改为较低的时间会加快速度，而较高的时间会减慢速度。但是我不知道有什么方法可以在没有 JavaScript 的情况下动态改变它的速度。

Fiddle