如何无限期地运行CSS动画

Question

所以我期待创建一个非常基本的雪效果。

我有一个关键帧动画的摇摆左右摇摆，并沿Y轴向下移动。我希望元素使用forward来保留结尾值。但我也想要循环动画（无限），以便它继续停止。

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