如何向前传递CSS动画

Question

所以我希望创造一个非常基本的雪效果.

我有一个关键帧动画,用于左右摇晃并沿Y轴向下移动的薄片.我希望元素使用转发保留结束值.但我还想循环播放动画(无限),以便它从中断的地方继续.

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

您可以使用两个动画,一个用于左右移动,另一个用于降低.

向上向下动画将使用绝对定位,因此它将取决于身高(或其第一个父级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