[英]CSS3 Animation - Smooth Infinite Animation
I've made a small Image animation where images changes opacity over time.It works smoothly but when last image gets to 100% it jumps straight to 0% without any transition. 我做了一个小的图像动画,其中图像随着时间的推移改变了不透明度。它工作顺利,但是当最后一个图像达到100%时,它直接跳到0%而没有任何转换。
I have already tried animation-direction: alternate for third image and delay for all image but it does not work for me. 我已经尝试过动画方向:替换第三张图像并延迟所有图像,但它对我不起作用。 Delay works only first step of animation cycle after it delay becomes 0 for all. 延迟在所有延迟变为0之后,仅延迟动画循环的第一步。
Here is my CSS 这是我的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 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>
The clasical aproach to this would be just using different delays: 对此的谴责只是使用不同的延迟:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.