如何使CSS动画无限循环播放

Question

我希望创建一个非常基础的雪花效果。

我有一个关键帧动画，可以让雪花左右摆动并沿着Y轴向下移动。我想要元素使用“forwards”保留结束值。但我还想循环播放动画（无限循环），以便它在离开的地方继续播放。

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

- mildrenben

---

@Danko我猜他想重复figure的相同路径，但从终点开始（也就是下面和下面和下面）。只是不想将整个路径编码到页面底部。 - Anarion

@Anarion 没错，你是对的。 - DaniP

Answer 1

您可以使用两个动画，一个向右/向左移动，另一个使其下落。

从上到下的动画将使用绝对定位，因此它将取决于body高度（或具有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

- Luizgrs

---

不错，加1，请补充解释一下根据容器的高度如何工作的上/下。 - DaniP

为了支持所有浏览器，请为 transform 和 animation 添加供应商前缀。 - Weafs.py