我制作了一个小型的Image动画，其中图像的不透明度会随时间变化。它可以平稳运行，但是当最后一张图像达到100％时，它会直接跳到0％而没有任何过渡。
我已经尝试了动画方向：交替显示第三张图像并延迟所有图像，但是它对我不起作用。延迟在所有延迟都变为0之后，仅在动画周期的第一步起作用。
这是我的CSS
.rightside .img-container img.first {
animation-name: first-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
/* animation-delay: -10s; */
}
.rightside .img-container img.second {
position: absolute;
top: 0;
animation-name: second-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
.rightside .img-container img.third {
position: absolute;
top: 0;
animation-name: final-image;
animation-duration: 9s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* animation-direction: alternate; */
}
@keyframes first-image {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes second-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes final-image {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
67% {
opacity: 0;
}
100% {
opacity: 1;
}
}
的HTML
<div class="img-container">
<img src="Images/Apple.png" class="first turn" alt="Image Here" />
<img src="Images/Bee.png" class="second" alt="Image Here" />
<img src="Images/Cat.png" class="third" alt="Image Here" />
</div>
达到此目的的经典方法只是使用不同的延迟：
div {
animation-name: all;
animation-duration: 9s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
background-color: yellow;
}
.first {
animation-delay: -3s;
background-color: lightgreen;
}
.third {
animation-delay: -6s;
background-color: lightblue;
}
@keyframes all {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}<div class="first"></div>
<div class="second"></div>
<div class="third"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句