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

如何无限地向前运行CSS动画

1 个答案: