How to quickly launch CSS animations

Question

So, I'm looking to create a really basic snow effect.

I have a keyframe animation to deflect the flakes on the side and move along the Y axis. I want the element to retain the final values ​​using forwards. But I also want to loop the animation (infinity) so that it continues where it left off.

HTML:

<div>
  <figure class="small"></figure>
</div>

CSS

div {
  width: 100%;
  height: 250px;
  background: #184254;
}

figure {
  border-radius: 50%;
}

@-webkit-keyframes snowfall {
  25% {
    transform: translateX(10px) translateY(20px);
      }
  75% {
    transform: translateX(-10px) translateY(30px);
  }
  100% {
    transform: translateX(0px) translateY(40px);
  }
}

.small {
  margin-left: 100px;
  width: 7px;
  height: 7px;
  background: #DFE9ED;
  -webkit-animation: snowfall 2s ease-in-out forwards infinite;
}

http://codepen.io/mildrenben/pen/PwZdXB

Answer 1

You can use two animations: one to move left and right and the other to make it fall.

, ( absolute relative).

figure {
  border-radius: 50%;
  position: absolute;
}

@-webkit-keyframes snowside {
 25% {
    transform: translateX(10px);
      }
  75% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-webkit-keyframes snowfall {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.small {
  margin-left: 100px;
  width: 7px;
  height: 7px;
  background: #DFE9ED;
  -webkit-animation: snowside 2s ease-in-out forwards infinite, snowfall 15s ease-in-out forwards infinite;
}

http://codepen.io/anon/pen/YPwOMY