0
我的动画在图像3上滑动得太快到动画图像4.你能帮我编辑属性@-moz-keyframes cyclefour{},@-moz-keyframes cyclefive{}和@-moz-keyframes cyclesix{}的CSS吗？CSS关键帧动画
/* ANIMATION */
@-moz-keyframes cycle {
\t 0% { top:0px; }
\t 4% { top:0px; }
\t 16% { top:0px; opacity:1; z-index:0; }
\t 20% { top:325px; opacity:0; z-index:0; }
\t 21% { top:-325px; opacity:0; z-index:-1; }
\t 92% { top:-325px; opacity:0; z-index:0; }
\t 96% { top:-325px; opacity:0; }
\t 100%{ top:0px; opacity:1; }
\t
}
@-moz-keyframes cycletwo {
\t 0% { top:-325px; opacity:0; }
\t 16% { top:-325px; opacity:0; }
\t 20% { top:0px; opacity:1; }
\t 24% { top:0px; opacity:1; }
\t 36% { top:0px; opacity:1; z-index:0; }
\t 40% { top:325px; opacity:0; z-index:0; }
\t 41% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
\t 0% { top:-325px; opacity:0; }
\t 36% { top:-325px; opacity:0; }
\t 40% { top:0px; opacity:1; }
\t 44% { top:0px; opacity:1; }
\t 56% { top:0px; opacity:1; }
\t 60% { top:325px; opacity:0; z-index:0; }
\t 61% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
\t 0% { top:-325px; opacity:0; }
\t 40% { top:-325px; opacity:0; }
\t 44% { top:0px; opacity:1; }
\t 56% { top:0px; opacity:1; }
\t 65% { top:0px; opacity:1; }
\t 76% { top:325px; opacity:0; z-index:0; }
\t 81% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
\t 0% { top:-325px; opacity:0; }
\t 56% { top:-325px; opacity:0; }
\t 60% { top:0px; opacity:1; }
\t 64% { top:0px; opacity:1; }
\t 76% { top:0px; opacity:1; z-index:0; }
\t 80% { top:325px; opacity:0; z-index:0; }
\t 81% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclesix {
\t 0% { top:-325px; opacity:0; }
\t 76% { top:-325px; opacity:0; }
\t 80% { top:0px; opacity:1; }
\t 84% { top:0px; opacity:1; }
\t 96% { top:0px; opacity:1; z-index:0; }
\t 100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
\t 0% { top:0px; }
\t 4% { top:0px; }
\t 16% { top:0px; opacity:1; z-index:0; }
\t 20% { top:325px; opacity:0; z-index:0; }
\t 21% { top:-325px; opacity:0; z-index:-1; }
\t 50% { top:-325px; opacity:0; z-index:-1; }
\t 92% { top:-325px; opacity:0; z-index:0; }
\t 96% { top:-325px; opacity:0; }
\t 100%{ top:0px; opacity:1; }
\t
}
@-webkit-keyframes cycletwo {
\t 0% { top:-325px; opacity:0; }
\t 16% { top:-325px; opacity:0; }
\t 20% { top:0px; opacity:1; }
\t 24% { top:0px; opacity:1; }
\t 36% { top:0px; opacity:1; z-index:0; }
\t 40% { top:325px; opacity:0; z-index:0; }
\t 41% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
\t 0% { top:-325px; opacity:0; }
\t 36% { top:-325px; opacity:0; }
\t 40% { top:0px; opacity:1; }
\t 44% { top:0px; opacity:1; }
\t 56% { top:0px; opacity:1; z-index:0; }
\t 60% { top:325px; opacity:0; z-index:0; }
\t 61% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
\t 0% { top:-325px; opacity:0; }
\t 40% { top:-325px; opacity:0; }
\t 44% { top:0px; opacity:1; }
\t 56% { top:0px; opacity:1; }
\t 65% { top:0px; opacity:1; z-index:0; }
\t 76% { top:325px; opacity:0; z-index:0; }
\t 81% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
\t 0% { top:-325px; opacity:0; }
\t 56% { top:-325px; opacity:0; }
\t 60% { top:0px; opacity:1; }
\t 64% { top:0px; opacity:1; }
\t 76% { top:0px; opacity:1; z-index:0; }
\t 80% { top:325px; opacity:0; z-index:0; }
\t 81% { top:-325px; opacity:0; z-index:-1; }
\t 100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclesix {
\t 0% { top:-325px; opacity:0; }
\t 76% { top:-325px; opacity:0; }
\t 80% { top:0px; opacity:1; }
\t 84% { top:0px; opacity:1; }
\t 96% { top:0px; opacity:1; z-index:0; }
\t 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; } \t
}
@-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; } \t
}
#slider{
\t background:#000;
\t border:5px solid #eaeaea;
\t box-shadow:1px 1px 5px rgba(0,0,0,0.7);
\t margin:40px auto 0;
\t overflow:visible;
\t width: 300px;
\t height: 460px;
\t margin-top:5px;
\t margin-left:15px;
\t margin-bottom:15px;
\t position:absolute;
}
#mask {
\t overflow:hidden;
\t height:460px;
}
#slider ul{
\t margin:0;
\t padding:0;
\t position:relative;
}
#slider li{
\t width:300px;
\t height:460px;
\t position:absolute;
\t top:-325px;
\t list-style:none;
}
li.animasi1 {
\t -moz-animation:cycle 25s linear infinite; \t
\t -webkit-animation:cycle 25s linear infinite; \t \t
}
li.animasi2 {
\t -moz-animation:cycletwo 25s linear infinite;
\t -webkit-animation:cycletwo 25s linear infinite; \t \t
}
li.animasi3 {
\t -moz-animation:cyclethree 25s linear infinite;
\t -webkit-animation:cyclethree 25s linear infinite; \t \t
}
li.animasi4 {
\t -moz-animation:cyclefour 25s linear infinite;
\t -webkit-animation:cyclefour 25s linear infinite; \t \t
}
li.animasi5 {
\t -moz-animation:cyclefive 25s linear infinite;
\t -webkit-animation:cyclefive 25s linear infinite; \t \t
}
li.animasi6 {
\t -moz-animation:cyclesix 25s linear infinite;
\t -webkit-animation:cyclesix 25s linear infinite; \t \t
}
.tooltip{
\t background:brown;
\t width:260px;
\t height:60px;
\t position:relative;
\t bottom:60px;
\t left:-500px;
\t -moz-transition:all 0.3s ease-in-out;
\t -webkit-transition:all 0.3s ease-in-out;
}
.tooltip h1 {
\t color:#fff;
\t font-size:24px;
\t font-weight:300;
\t font-family: "Menu";
\t line-height:60px;
\t 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{
\t left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
\t -moz-animation-play-state:paused;
\t -webkit-animation-play-state:paused;
}
/* PROGRESS BAR */
.progress-bar {
\t position:relative;
\t top:-5px;
\t width:300px;
\t height:5px;
\t background:white;
\t -moz-animation:fullexpand 25s ease-out infinite;
\t -webkit-animation:fullexpand 25s ease-out infinite;
}<div id="slider">
\t \t <div id="mask">
\t \t \t \t <ul>
\t \t \t \t \t <li id="satu" class="animasi1">
\t \t \t \t \t <a href="#wayang"><img src="http://wayang.16mb.com/gambar/wayang.jpg" alt="wayang"/> </a><div class="tooltip"> <h1>Wayang</h1> </div></li>
\t \t \t \t \t <li id="dua" class="animasi2">
\t \t \t \t \t <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>
\t \t \t \t \t <li id="tiga" class="animasi3">
\t \t \t \t \t <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>
\t \t \t \t \t <li id="empat" class="animasi4">
\t \t \t \t \t <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>
\t \t \t \t \t <li id="lima" class="animasi5">
\t \t \t \t \t <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">
\t \t \t \t \t <a href="#kontak"><img src="http://wayang.16mb.com/gambar/kontak.jpg" alt="kontak"/> </a><div class="tooltip"> <h1>Kontak</h1> </div></li>
\t \t \t \t </ul>
\t </div>
\t <div class="progress-bar"> \t </div>
</div>看到我的项目https://jsfiddle.net/JonoRecher/o0a8ezj9/