html - CSS关键帧动画

Question

我的动画从图像 3 滑到动画图像 4 时速度太快。你能帮我编辑属性 @-moz-keyframes cyclefour{} 上的 CSS，@-moz-keyframes cyclefive{} 和 @-moz-keyframes cyclesix{}？

/* 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/

Answer 1

您还可以为所有具有不同 animation-delay 属性的幻灯片使用一个 @keyframe 动画。像这样:

.slider {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 300px;
}
.slider:after {
  animation: slideLoader 2s infinite;
  background-color: rgba(255, 255, 255, 0.75);
  bottom: 0;
  content: "";
  height: 0.5em;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.slider li {
  animation: slide 10s infinite linear;
  left: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
.slider li:nth-child(2) {
  animation-delay: -8s;
}
.slider li:nth-child(3) {
  animation-delay: -6s;
}
.slider li:nth-child(4) {
  animation-delay: -4s;
}
.slider li:nth-child(5) {
  animation-delay: -2s;
}
.slider li .tip {
  background: red;
  bottom: 0;
  color: white;
  display: block;
  left: 0;
  padding: 1em;
  position: absolute;
  transform: translateX(-100%);
  transition: transform 200ms;
}
.slider li:hover .tip {
  transform: translateX(0%);
}

@keyframes slide {
  0% {
    transform: translateY(100%);
  }
  5%,
25% {
    transform: translateY(0%);
  }
  30%,
100% {
    transform: translateY(-100%);
  }
}
@keyframes slideLoader {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<ul class="slider">
  <li>
    <img src="http://placehold.it/300/0074D9/FFFFFF?text=One"><span class="tip">Tip1</span></img>
  </li>
  <li>
    <img src="http://placehold.it/300/39CCCC/000000?text=Two"><span class="tip">Tip2</span></img>
  </li>
  <li>
    <img src="http://placehold.it/300/2ECC40/000000?text=Three"><span class="tip">Tip3  </span></img>
  </li>
  <li>
    <img src="http://placehold.it/300/FF851B/000000?text=Four"><span class="tip">Tip4</span></img>
  </li>
  <li>
    <img src="http://placehold.it/300/85144b/FFFFFF?text=Five"><span class="tip">Tip5</span></img>
  </li>
</ul>