CSS滑块关键帧循环

时间：2016-12-14 08:11:06

标签： html css css-animations

我的网站有一个滑块，但我的滑块错误。动画图像3,4,5上的错误滑块可以帮我修复我的滑块。这是我的项目

/* ANIMATION */
@-moz-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; } 
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; } 
	21% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-moz-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; } 
	36% { top:0px; opacity:1; z-index:0; } 
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; } 
	56% { top:0px; opacity:1; } 
	60% { top:325px; opacity:0; z-index:0; }
	61% { top:-325px; opacity:0; z-index:-1; } 
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	40% { top:-325px; opacity:0; }
	44% { top:0px; opacity:1; }
	56% { top:0px; opacity:1; }
	65% { top:0px; opacity:1;  }
	76% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclesix {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}


@-webkit-keyframes cycle {
	0%  { top:0px; }
	4%  { top:0px; }
	16% { top:0px; opacity:1; z-index:0; } 
	20% { top:325px; opacity:0; z-index:0; }
	21% { top:-325px; opacity:0; z-index:-1; }
	50% { top:-325px; opacity:0; z-index:-1; }
	92% { top:-325px; opacity:0; z-index:0; }
	96% { top:-325px; opacity:0; }
	100%{ top:0px; opacity:1; }
	
}
@-webkit-keyframes cycletwo {
	0%  { top:-325px; opacity:0; }
	16% { top:-325px; opacity:0; }
	20% { top:0px; opacity:1; }
	24% { top:0px; opacity:1; } 
	36% { top:0px; opacity:1; z-index:0; } 
	40% { top:325px; opacity:0; z-index:0; }
	41% { top:-325px; opacity:0; z-index:-1; }  
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
	0%  { top:-325px; opacity:0; }
	36% { top:-325px; opacity:0; }
	40% { top:0px; opacity:1; }
	44% { top:0px; opacity:1; } 
	56% { top:0px; opacity:1; z-index:0; } 
	60% { top:325px; opacity:0; z-index:0; } 
	61% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
	0%  { top:-325px; opacity:0; }
	40% { top:-325px; opacity:0; }
	44% { top:0px; opacity:1; }
	56% { top:0px; opacity:1; }
	65% { top:0px; opacity:1; z-index:0; }
	76% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
	0%  { top:-325px; opacity:0; }
	56% { top:-325px; opacity:0; }
	60% { top:0px; opacity:1; }
	64% { top:0px; opacity:1; }
	76% { top:0px; opacity:1; z-index:0; }
	80% { top:325px; opacity:0; z-index:0; }
	81% { top:-325px; opacity:0; z-index:-1; }
	100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclesix {
	0%  { top:-325px; opacity:0; }
	76% { top:-325px; opacity:0; }
	80% { top:0px; opacity:1; }
	84% { top:0px; opacity:1; }
	96% { top:0px; opacity:1; z-index:0; }
	100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}



#slider{
	background:#000;
	border:5px solid #eaeaea;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	margin:40px auto 0;
	overflow:visible;
	width: 300px;
	height: 460px;
	margin-top:5px;
	margin-left:15px;
	margin-bottom:15px;
	position:absolute;
}
#mask {
	overflow:hidden;
	height:460px;
}
#slider ul{
	margin:0;
	padding:0;
	position:relative;
}
#slider li{
	width:300px;
	height:460px;
	position:absolute;
	top:-325px;
	list-style:none;
}

li.animasi1 {
	-moz-animation:cycle 25s linear infinite;	
	-webkit-animation:cycle 25s linear infinite;		
}
li.animasi2  {
	-moz-animation:cycletwo 25s linear infinite;
	-webkit-animation:cycletwo 25s linear infinite;		
}
li.animasi3 {
	-moz-animation:cyclethree 25s linear infinite;
	-webkit-animation:cyclethree 25s linear infinite;		
}
li.animasi4 {
	-moz-animation:cyclefour 25s linear infinite;
	-webkit-animation:cyclefour 25s linear infinite;		
}
li.animasi5 {
	-moz-animation:cyclefive 25s linear infinite;
	-webkit-animation:cyclefive 25s linear infinite;		
}
li.animasi6 {
	-moz-animation:cyclesix 25s linear infinite;
	-webkit-animation:cyclesix 25s linear infinite;		
}

.tooltip{
	background:brown;
	width:260px;
	height:60px;
	position:relative;
	bottom:60px;
	left:-500px;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}
.tooltip h1 {
	color:#fff;
	font-size:24px;
	font-weight:300;
	font-family: "Menu";
	line-height:60px;
	padding:0 0 0 20px;
}
li#satu:hover .tooltip,
li#dua:hover .tooltip,
li#tiga:hover .tooltip,
li#empat:hover .tooltip,
li#lima:hover .tooltip,
li#enam:hover .tooltip{
	left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar {
	position:relative;
	top:-5px;
	width:300px; 
	height:5px;
	background:white;
	-moz-animation:fullexpand 25s ease-out infinite;
	-webkit-animation:fullexpand 25s ease-out infinite;
}
<div id="slider">
        		<div id="mask">
				<ul>
					<li id="satu" class="animasi1">
					<a href="#wayang"><img src="http://wayang.16mb.com/gambar/wayang.jpg" alt="wayang"/> </a><div class="tooltip"> <h1>Wayang</h1> </div></li>

					<li id="dua" class="animasi2">
					<a href="#jwayang"><img src="http://wayang.16mb.com/gambar/jwayang.jpg" alt="jenis wayang"/> </a><div class="tooltip"> <h1>Jenis Wayang</h1> </div></li>

					<li id="tiga" class="animasi3">
					<a href="#twayang"><img src="http://wayang.16mb.com/gambar/twayang.jpg" alt="tokoh wayang"/> </a><div class="tooltip"> <h1>Tokoh Wayang</h1> </div></li>

					<li id="empat" class="animasi4">
					<a href="#vwayang"><img src="http://wayang.16mb.com/gambar/vwayang.jpg" alt="Video wayang"/> </a><div class="tooltip"> <h1>Video Wayang</h1> </div></li>

					<li id="lima" class="animasi5">
					<a href="#swayang"><img src="http://wayang.16mb.com/gambar/swayang.jpg" alt="Soal latihan"/> </a><div class="tooltip"> <h1>Soal Latihan</h1> </div></li>
                    
                    <li id="enam" class="animasi6">
					<a href="#kontak"><img src="http://wayang.16mb.com/gambar/kontak.jpg" alt="kontak"/> </a><div class="tooltip"> <h1>Kontak</h1> </div></li>
				</ul>
            	</div>
           	 <div class="progress-bar">          	</div>
    </div>

或者您可以看到https://jsfiddle.net/JonoRecher/o0a8ezj9/

0 个答案:

没有答案
相关问题
最新问题