無盡的滾動幻燈片動畫

我想在CSS純粹創造無限滾動幻燈片。無盡的滾動幻燈片動畫

我遇到的唯一問題是如何去從右邊滑回的第一個元素一旦動畫完成其循環1個階段......而不僅僅是突然出現因爲動畫正在重新啓動。

<html> 
<head> 
<style> 

*{margin:0 auto;overflow:hidden;} 


.pic { 
position:absolute; 
width:100%; 
height:100%; 
} 

#one{ 
background:rgba(23,230,120,0.9); 
animation: scroll1 4s infinite; 
} 

#two{ 
background:rgba(230,23,180,0.9); 
right:-100%; 
animation: scroll 4s infinite; 
} 

#three{ 
background:rgba(23,230,220,0.9); 
right:-200%; 
animation: scroll 4s infinite; 
} 

#four{ 
background:rgba(230,80,220,0.9); 
right:-300%; 
animation: scroll 4s infinite; 
} 

#contain{ 
position:absolute; 
width:400%; 
height:100%; 
left:0; 
} 

@keyframes scroll 
{ 
from {left:0;} 
20% {left:0;} 
25% {left:-100%;} 
45% {left:-100%;} 
50% {left:-200%;} 
70% {left:-200%;} 
75% {left:-300%;} 
to {left:-300%;} 
} 

@keyframes scroll1 
{ 
from {left:0;} 
20% {left:0;} 
25% {left:-100%;opacity:1;} 
45% {left:-100%;opacity:0;} 
50% {left:100%;opacity:0;} 
to {left:100%;opacity:1;} 
} 



</style> 
<body> 

<div id="contain" class="pic"> 
<div id="one" class="pic"></div> 
<div id="two" class="pic"></div> 
<div id="three" class="pic"></div> 
<div id="four" class="pic"></div> 
</div> 



</body> 
</html>

來源

2014-02-26 AllTheTime

請提供的jsfiddle OU Codepen示例（或類似的東西）來幫助我們幫助您。 :) – gnclmorais

@gnclmorais複製代碼在一個HTML文件，然後在瀏覽器中執行。 – R3tep

@ R3tep。我同意gnclmorais，提供的jsfiddle所以很容易爲人們提供幫助。如果海報不能讓我們輕鬆打擾海報，我甚至不會去幫助。另外，如果您可以在沒有js的情況下進行無盡的幻燈片播放，我會非常驚訝。我從來沒有見過一個 – 2pha

經過幾個小時搞亂div大小和時間後，我發現解決方案！有沒有大量的信息，但我用this site的想法：和簡化他們一點。

<html> 
<head> 
<script> 
</script> 
<style> 

*{margin:0 auto;overflow:hidden;} 

body{ 
background:black; 
} 

.pic { 
position:absolute; 
width:100%; 
height:100%; 
animation: scroll 10s infinite; 
} 

#one{ 
background:rgba(23,230,120,0.9); 
animation: scroll1 10s infinite; 
} 

#two{ 
background:rgba(230,23,180,0.9); 
right:-200%; 
} 

#three{ 
background:rgba(23,230,220,0.9); 
right:-400%; 
} 

#four{ 
background:rgba(230,80,220,0.9); 
right:-600%; 
} 

#contain{ 
position:absolute; 
/*top:100px;*/ 
width:100%; 
height:100%; 
left:0; 
} 














@keyframes scroll 
{ 
from {left:0;} 
20% {left:0;} 
25% {left:-200%;} 
45% {left:-200%;} 
50% {left:-400%;} 
70% {left:-400%;} 
75% {left:-600%;} 
95% {left:-600%;} 
to {left:-800%;} 
} 

@keyframes scroll1 { 
0% {left:0;} 
20% {left:0; z-index:1;} 
25% {left:-100%; z-index:0; opacity:1;} 
26% {left:-100%; z-index:-1; opacity:0;} 
27% {left:100%; z-index:-1;} 
70% {left:100%; z-index:10;opacity:1;} 
95% {left:100%;} 
100% {left:0;} 
} 




</style> 
<body> 

<div id="contain"> 
<div id="one" class="pic"></div> 
<div id="two" class="pic"></div> 
<div id="three" class="pic"></div> 
<div id="four" class="pic"></div> 
</div> 




</body> 
</html>

我強烈建議您親自嘗試一下這段代碼！

來源

2014-02-26 21:12:41 AllTheTime

無盡的滾動幻燈片動畫

回答

相關問題