Seamless SVG Animation

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%); 
    } 
} 

Codepen下面：
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，这样它时，它跳回再次启动动画的另一个循环出现连续的。