如何无限向前运行CSS动画

Posted 2023-03-06

【中文标题】如何无限向前运行CSS动画

【英文标题】：How to run a CSS animation infintely forwards

【发布时间】：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 是的，你是对的

【参考方案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 的供应商前缀。