我正在使用 CSS 制作背景图像淡入淡出动画，第一次运行循环时它按预期工作，但第二次它在整个持续时间内卡在最后一个图像上，短暂跳转到第三个图像，然后返回到最后一个。
我如何更新它，以便它在每个无限循环期间顺利地运行动画？
#rotate {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
}
#rotate li {
animation: func 16s linear 0s infinite;
list-style-type: none;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
background: no-repeat 50% 30% / cover;
opacity: 0;
}
#rotate li:nth-child(1) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
}
#rotate li:nth-child(2) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
}
#rotate li:nth-child(3) {
animation-delay: 8s;
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
}
#rotate li:nth-child(4) {
animation-delay: 12s;
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
}
@keyframes func {
0%,
100% {
opacity: 0;
animation-timing-function: ease-in;
}
5%,
90% {
opacity: 1;
}
}
<ul id="rotate">
<li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=one')"></li>
<li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=two')"></li>
<li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=three');"></li>
<li style="background-image:url('https://dummyimage.com/600x400/000/fff&text=four')"></li>
</ul>
以及 Codepen 示例的链接：https://codepen.io/erinpearson/pen/YvxVRM?editors=1100 https://codepen.io/erinpearson/pen/YvxVRM?editors=1100
更改@keyframes 中的不透明度。
#rotate {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
}
#rotate li {
animation: func 16s linear 0s infinite;
list-style-type: none;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
background: no-repeat 50% 30% / cover;
opacity: 0;
}
#rotate li:nth-child(1) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
}
#rotate li:nth-child(2) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
}
#rotate li:nth-child(3) {
animation-delay: 8s;
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
}
#rotate li:nth-child(4) {
animation-delay: 12s;
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
}
@keyframes func {
0% {
opacity: 0;
}
6% {
opacity: 1;
}
24% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<ul id="rotate">
<li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=one')"></li>
<li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=two')"></li>
<li style="
background-image: url('https://dummyimage.com/600x400/000/fff&text=three');"></li>
<li style="background-image: url('https://dummyimage.com/600x400/000/fff&text=four')"></li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
