如何无限向前运行CSS动画答案

【问题标题】：How to run a CSS animation infintely forwards如何无限向前运行CSS动画
【发布时间】：2015-02-07 08:28:26
【问题描述】：

所以我正在寻找创建一个非常基本的雪效果。

我有一个关键帧动画，用于片状左右摇摆并沿 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

【问题讨论】：

@Danko 我猜他想重复figure 的相同路径，但从终点开始（这意味着下面和下面和下面）。只是不要将整个路径编码到页面底部
@Anarion mm 是的，你是对的

标签： css animation keyframe

【解决方案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

【讨论】：

好伙伴，加 1，请用 up / down 的解释来补充你的答案。根据容器的高度工作。
为所有浏览器支持添加 transform 和 animation 的供应商前缀。