如何制作一个svg填充的背景去纯CSS的动画？

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

您可以使用以下内容轻松地为其设置动画：

@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