CSS渐变动画延迟时序 [英] CSS fading animation delay timing

问题描述

我想用css3创建一个幻灯片效果我有三个图像，我需要淡入到彼此。

I'm trying to create a slideshow effect with css3 I have three images which I need to fade into each one another. - each transition needs to last for 3 seconds.

第一张图片显示3秒，然后变成第二张，第三张照片显示

1st image shows for 3seconds then fades to 2nd and same to third

我不确定如何计算关键帧的百分比。

I'm unsure how to work out the percentage for the keyframes.

Codepen http://codepen.io/anon / pen / MYmPYp

 @-webkit-keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 @-moz-keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 @-ms-keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 @keyframes cf4FadeInOut {
   0% {
     opacity: 1;
   }
   17% {
     opacity: 1;
   }
   25% {
     opacity: 1;
   }
   92% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 .team-img {
   position: relative;
   height: 329px;
   width: 450px;
 }
 .team-img img {
   position: absolute;
   left: 0;
   z-index: 0;
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-duration: 9s;
   -moz-animation-duration: 9s;
   -ms-animation-duration: 9s;
 }
 .team-img img:nth-of-type(1) {
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-delay: 3s;
   -moz-animation-delay: 3s;
   -ms-animation-delay: 3s;
 }
 .team-img img:nth-of-type(2) {
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -ms-animation-delay: 6s;
 }
 .team-img img:nth-of-type(3) {
   -webkit-animation-name: cf4FadeInOut;
   -moz-animation-name: cf4FadeInOut;
   -ms-animation-name: cf4FadeInOut;
   -webkit-animation-delay: 9s;
   -moz-animation-delay: 9s;
   -ms-animation-delay: 9s;
 }

<div class="team-img">
  <img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
  <img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
  <img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">

</div>

小时，慢慢失去意志。我轻松google了。

I've been racking my brain for a few hours, slowly losing the will. I've googled effortlessly.

感谢您，
Dan

Thanks, Dan

推荐答案

t需要动画的第一个图像，只有第二和第三。它使代码更短：

You don't need to animate the first image, only the second and third. It makes a code much shorter:

.team-img {
  position: relative;
  height: 329px;
  width: 450px;
}
.team-img img {
  position: absolute;
  left: 0;
  top: 0;
}
.team-img img:nth-of-type(2) {
  opacity: 0;
  -webkit-animation: fading2 ease 14s infinite;  
  animation: fading2 ease 14s infinite;
}
.team-img img:nth-of-type(3) {
  opacity: 0;
  -webkit-animation: fading3 ease 14s infinite;  
  animation: fading3 ease 14s infinite;
}
@-webkit-keyframes fading2 {
  0%: { opacity: 0;}
  21% { opacity: 0;}
  35% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@keyframes fading2 {
  0%: { opacity: 0;}
  21% { opacity: 0;}
  35% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@-webkit-keyframes fading3 {
  0%: { opacity: 0;}
  56% { opacity: 0;}
  70% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@keyframes fading3 {
  0%: { opacity: 0;}
  56% { opacity: 0;}
  70% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}

<div class="team-img">
   <img width="200px" height="200px" src="http://blackdogballroom.co.uk/nws/wp-content/uploads/sites/2/2014/11/BDB-290212-Img-048.jpg">
   <img width="200px" height="200px" src="http://3.bp.blogspot.com/-I2TYXJ3lDYw/UFsjvkedaXI/AAAAAAAAE-w/7EYzTeZMpsc/s1600/00Halloween+Spooks.JPG">
   <img width="200px" height="200px" src="http://blog.lafraise.com/fr/wp-content/uploads/2013/11/Free-hug-zoneinfinite.jpg">
</div>

这篇关于CSS渐变动画延迟时序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！