Html 如何在body标记中重复动画背景图像？

嗨，我尝试了很多次，搜索到谷歌没有找到最好的解决方案

你能帮我吗

我的问题是如何在html中重复body标记中的所有时间动画背景图像

我的密码是

HTML

<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

---

尝试循环它，以便在结束时项目结束在起始位置 在0%开始时，在99%结束时，在100%开始时，执行一些css样式以不显示99-100阶段

0% {
width: 141px;
height: 191px;
opacity: 1;
 -webkit-transform: translate(0, 0px) rotateZ(0deg);
}
99% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 600px) rotateZ(360deg);
}
100% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 0px) rotateZ(0deg);
}

p、 对不起，我宁愿对此发表评论，但我的声誉低于50 更新：问题只是在第79行输入了错误的原始JSFIDLE

---

-moz变换：变换：平移（0px，900px）旋转（270度）2变换尝试
如果您的意思是它们必须从天空落下^，请将此添加到.loader{top:-200px；}这将隐藏花的原始位置，因此只显示落下阶段（0%
0% {
width: 141px;
height: 191px;
opacity: 1;
 -webkit-transform: translate(0, 0px) rotateZ(0deg);
}
99% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 600px) rotateZ(360deg);
}
100% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 0px) rotateZ(0deg);
}