Question

我根据本指南的基本原则制作了一个简单的动画：http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

动画第一次完美运行，但是当它循环时，它变成灰色并且仅循环通过一些图像。我无法弄清楚为什么循环会起作用但与第一次不同。

这是我的css：

#fadethru > img { 
 position: absolute;
 color: transparent;
 top: 0px;
 left: 0px;
 opacity: 0;
 z-index: 0;
 display: block;
 -webkit-animation: imageAnimation 4.5s linear infinite 0s;
 -moz-animation: imageAnimation 4.5s linear infinite 0s;
 -o-animation: imageAnimation 4.5s linear infinite 0s;
 -ms-animation: imageAnimation 4.5s linear infinite 0s;
 animation: imageAnimation 4.5s linear infinite 0s;
 animation-iteration-count: infinite; 
}

#fadethru > img:nth-child(1)  {
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 -o-animation-delay: 0.5s;
 -ms-animation-delay: 0.5s;
 animation-delay: 0.5s; 
}

#fadethru > img:nth-child(2) {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 -ms-animation-delay: 1s;
 animation-delay: 1s; 
}

#fadethru > img:nth-child(3) {
 -webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
 -o-animation-delay: 1.5s;
 -ms-animation-delay: 1.5s;
 animation-delay: 1.5s; 
}

#fadethru > img:nth-child(4) {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 -ms-animation-delay: 2s;
 animation-delay: 2s; 
}

#fadethru > img:nth-child(5) {
 -webkit-animation-delay: 2.5s;
 -moz-animation-delay: 2.5s;
 -o-animation-delay: 2.5s;
 -ms-animation-delay: 2.5s;
 animation-delay: 2.5s; 
}

#fadethru > img:nth-child(6) {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 -ms-animation-delay: 3s;
 animation-delay: 3s; 
}

#fadethru > img:nth-child(7) {
 -webkit-animation-delay: 3.5s;
 -moz-animation-delay: 3.5s;
 -o-animation-delay: 3.5s;
 -ms-animation-delay: 3.5s;
 animation-delay: 3.5s; 
}

#fadethru > img:nth-child(8) {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 -ms-animation-delay: 4s;
 animation-delay: 4s; 
}

#fadethru > img:nth-child(9) {
 -webkit-animation-delay: 4.5s;
 -moz-animation-delay: 4.5s;
 -o-animation-delay: 4.5s;
 -ms-animation-delay: 4.5s;
 animation-delay: 4.5s; 
}



@-webkit-keyframes imageAnimation {
  0% { opacity: 0; animation-timing-function: ease-in; }
  15% { opacity: 1; animation-timing-function: ease-out; }
  50% { opacity: 1 }
  75% { opacity: 0 }
  100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
  0% { opacity: 0; animation-timing-function: ease-in; }
  15% { opacity: 1; animation-timing-function: ease-out; }
  50% { opacity: 1 }
  75% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
   0% { opacity: 0; animation-timing-function: ease-in; }
    15% { opacity: 1; animation-timing-function: ease-out; }
    50% { opacity: 1 }
    75% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    15% { opacity: 1; animation-timing-function: ease-out; }
    50% { opacity: 1 }
    75% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    15% { opacity: 1; animation-timing-function: ease-out; }
    50% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0 }
}

和HTML：

<div id="fadethru">
        <img src="img/redjewel.png" id="red" alt="red jewel">
        <img src="img/orangejewel.png" id="orange" alt="orange jewel">
        <img src="img/yellowjewel.png" id="yellow" alt="yellow jewel">
        <img src="img/grassjewel.png" id="grass" alt="green jewel">
        <img src="img/greenjewel.png" id="green" alt="turquois jewel">
        <img src="img/bluejewel.png" id="blue" alt="blue jewel">
        <img src="img/indigojewel.png" id="indigo" alt="indigo jewel">
        <img src="img/purplejewel.png" id="purple" alt="purple jewel">
        <img src="img/pinkjewel.png" id="pink" alt="pink jewel">
    </div>

Answer 1

您需要仅显示其占用的总循环时间部分的每个项目。所以9显示/ 100％=每个元素总循环时间的11.11％。

你有的元素显示循环的15-50％，所以当它开始重复时，一些元素覆盖其他元素，但这不能正常工作，所以通过该错误你会看到灰色。 / p>

我做了0-14％，懒惰，也只用于chrome（我使用），所以我没有必要输入所有代码！但它应该解决你的问题：

#fadethru > img {
    opacity:0;
     position:absolute;
        top:0; left:0;
 -webkit-animation: imageAnimation 4.5s linear infinite 0s;
}

和

@-webkit-keyframes imageAnimation {
  0% { opacity: 0; animation-timing-function: ease-in; }
  8% { opacity: 1; animation-timing-function: ease-out; }
  9% { opacity: 1 }
  14% { opacity: 0 }
  100% { opacity: 0 }
}

为什么我的动画重复正常？

1 个答案: