3
我有一個麻煩得到一個交叉淡化動畫停止在最後一個孩子。我知道動畫填充模式：轉發，但它似乎不工作（我試圖把它放在不同的地方，如在最初的.crossfade聲明。）如何使css動畫停止在最後一個孩子css3
這是我的html：
<body>
<div class= "ad">
<div class="crossfade">
<img src="image1.jpg" alt="Image 1">
<img src="image2.png" alt="Image 2">
<img src="image3.png" alt="Image 3">
<img src="image4.png" alt="Image 4">
</div>
</div>
</body>
我的CSS是在這裏：
.crossfade > img {
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
animation-iteration-count:1;
-webkit-backface-visibility: hidden;
-webkit-animation-name: imageAnimation;
-webkit-animation: imageAnimation 43s linear 1 0s;
-moz-animation: imageAnimation 43s linear 1 0s;
-o-animation: imageAnimation 43 linear 1 0s;
-ms-animation: imageAnimation 43 linear 1 0s;
}
.crossfade > img:nth-child(1) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.crossfade > img:nth-child(2) {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
.crossfade > img:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-o-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.crossfade > img:nth-child(4) {
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-o-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
animation-fill-mode: forwards;
}
@-webkit-keyframes imageAnimation {
0%{ opacity:0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1}
25% { opacity: 0 }
100% { opacity: 0}
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0}
100% { opacity: 0 }
}
我不太清楚我在做什麼錯誤或我錯過了什麼。提前致謝！
非常感謝！你的回答很簡單，而且有道理。 （我對css3還是有點新鮮的）。我是否理解宣佈一個新的「動畫：」每次爲每個孩子重新開始動畫？ 旁邊的問題：我目前正在關注一個教程，並注意到你不需要在你的答案中使用-o-，-moz-，-webkit-。我的理解是，這些是用來使它與不同的瀏覽器兼容，但你的版本似乎無論如何工作。有什麼特別的情況下我會使用這些嗎？ ：]再次感謝堆。 –
@JessicaFoo這個答案的解決方案並不_restart_動畫，它創建了4個動畫，這比我在我的答案中已經發布的性能要低（檢查我的第二個樣本，它與這個樣本完全相同，但更加優化），所以我不建議這樣做。 – LGSon
@JessicaFoo此外，缺少前綴屬性無論如何，它的工作原理與您理解的一樣，對於需要它們的舊瀏覽器，如果您希望您的網站訪問者使用舊瀏覽器，也應該添加它們看動畫。 – LGSon