Бесшовная анимация 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%); 
    } 
} 

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 именно так, что кажется непрерывным, когда он возвращается снова, чтобы начать еще один цикл анимации.