Question

我正在努力制作一个无缝动画，所以在一个连续的循环中，它继续像雨一样。问题是动画重置，你可以告诉。我想用CSS3动画做到这一点。有可能吗？

完整代码位于下面的代码中

row_number

Codepen下面：
http://codepen.io/Jesders88/pen/bBYQom

Answer 1

最简单的方法是让你的洒水高于屏幕。现在，当你将它们向下移动时，更多的是进入屏幕。

Here's a demo.

我从你的例子中做了一个改变。我没有使用四个相同的洒水方格，而是只取四个中的一个并将其变成一个模式这样SVG就会为你重复它，你可以用连续的洒水模式填充你想要的任何区域。 / p>

然后我制作了一个与屏幕一样宽的矩形，其高度等于（svgHeight + patternHeight）。我在屏幕顶部的-patternHeight处启动它，然后将其设置为一个patternHeight（487）的距离。

#rainRect {
  animation: rainSprinkles 2s linear infinite;
}

@keyframes rainSprinkles {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(487px);
  }
}

我们将它移动到一个patternHeight，以便当它再次跳回来开始动画的另一个循环时它看起来是连续的。

无缝SVG动画

1 个答案: