如何在body標簽中重復動畫背景圖像？

Question

嗨，我嘗試了很多次，但搜索Google卻找不到最佳解決方案

你能幫我嗎

我的問題是如何在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>

CSS

/*Lets start with the flower animationr*/
.loader {
position:absolute;
left:0;
right:0;
top:0;
z-index:-1;
}
.loader span {
display: inline-block;
width: 141px;
height: 191px;
margin: -280px 40px 54px -34px;
background:url("http://ppus.techletsolutions.com/media/wysiwyg/home/bg-leaves-19may14.png");
/*background:url("http://premiumcoding.com/CSSTricks/fallingLeaves/leaf.png");*/
-webkit-animation: loader 25s infinite  linear;
-moz-animation: loader 25s infinite  linear;
}
.loader span:nth-child(5n+5) {
 -webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.loader span:nth-child(3n+2) { 
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.loader span:nth-child(2n+5) { 
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}

.loader span:nth-child(3n+10) { 
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.loader span:nth-child(7n+2) {
 -webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.loader span:nth-child(4n+5) {
 -webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.loader span:nth-child(3n+7) { 
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
@-webkit-keyframes loader {
0% {
width: 141px;
height: 191px;
opacity: 1;
 -webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
width: 141px;
height: 191px;
opacity: 1;
 -webkit-transform: translate(0px, 900px) rotateZ(270deg);
}
100% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 1100px) rotateZ(360deg);
}
}
@-moz-keyframes loader {
0% {
width: 141px;
height: 191px;
opacity: 1;
-moz-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
width: 141px;
height: 191px;
opacity: 1;
-moz-transform: transform: translate(0px, 900px) rotateZ(270deg);
}
100% {
width: 141px;
height: 191px;
opacity: 0;
-moz-transform: translate(0px, 1100px) rotateZ(360deg);
}
}
/* Lets start with the flower animationr*/

演示鏈接

Answer 1

嘗試將其循環播放，以使最終項目以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);
}

http://jsfiddle.net/UUC57/3/ ps抱歉，我寧願對此發表評論，但我的聲譽低於50 更新：問題只是在第79行出現了原始jsfiddle類型錯誤的問題-moz-transform: transform: translate(0px, 900px) rotateZ(270deg); 2種轉換嘗試http://jsfiddle.net/UUC57/4/