无缝 SVG 动画

Question

我正在尝试制作一个无缝的动画，所以 svg 只是继续像雨一样在一个连续的循环中运行。问题是动画重置，你可以知道。我想用 CSS3 动画来做到这一点。有可能吗？

完整代码在下面的codepen中

#sprinkles                                                  { position:absolute; height:100%; width:100%; }
#sprinkles .sprinkle                                        { animation:rainSprinkles .85s linear infinite }
#sprinkles .sprinkle.white                                  { fill:$white; }
#sprinkles .sprinkle.blue                                   { fill:$blue; }
#sprinkles .sprinkle.yellow                                 { fill:$yellow; }
#sprinkles .sprinkle.pink                                   { fill:$hot-pink; }

@keyframes rainSprinkles {
    0% {

              transform: translateY(-100%);
    }

    100% {
      visibility: hidden;

              transform: translateY(1000%);
    }
}

下面的代码：
http://codepen.io/Jesders88/pen/bBYQom

Answer 1

最简单的方法是让洒水器比屏幕高。现在，当您将它们向下移动时，屏幕上会出现更多内容。

Here's a demo.

我对您的示例进行了一项更改。我没有使用四个相同的洒水方块，而是只取了四个中的一个并将其变成了一种图案。这样 SVG 会为您重复它，您可以用连续的洒水图案填充您想要的任何区域。

然后我制作了一个与屏幕一样宽且高度等于 (svgHeight + patternHeight) 的矩形。我从屏幕顶部的 -patternHeight 开始，然后将其动画化到一个 patternHeight (487) 的距离。

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

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

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

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