无尽的滚动幻灯片动画

我想在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

无尽的滚动幻灯片动画

回答

相关问题