gpt4 book ai didi

html - CSS3 动画 - 流畅的无限动画

转载 作者:搜寻专家 更新时间:2023-10-31 08:39:03 25 4
gpt4 key购买 nike

我制作了一个小图像动画,其中图像的不透明度随时间变化。它运行流畅,但当最后一张图像达到 100% 时,它直接跳到 0%,没有任何过渡。

我已经尝试过 animation-direction: alternate for third image and delay for all image 但它对我不起作用。在延迟全部变为 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>

关于html - CSS3 动画 - 流畅的无限动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55479886/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com