CSS Image Fade动画仅在第一次运行

本文介绍了CSS Image Fade动画仅在第一次运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用CSS制作背景图像淡入淡出动画，它在第一次循环运行时可以按预期工作，但是在整个过程中第二次卡在最后一张图像上，暂时跳到了第三张图像，然后回到最后一个.

I am making a background-image fading animation using CSS and it works as expected the first time it runs through the loop, but the second time it gets stuck on the last image throughout the duration, briefly jumps to the third image, then back to the last one.

如何更新它，使其在每个无限循环中顺利通过动画?

How can I update it so it runs smoothly through the animation during each of the infinite loops?

#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('dummyimage/600x400/000/fff&text=one')"></li> <li style="background-image: url('dummyimage/600x400/000/fff&text=two')"></li> <li style="background-image: url('dummyimage/600x400/000/fff&text=three');"></li> <li style="background-image:url('dummyimage/600x400/000/fff&text=four')"></li> </ul>

以及指向Codepen示例的链接: codepen.io/erinpearson/pen/YvxVRM?editors = 1100

And a link to Codepen sample: codepen.io/erinpearson/pen/YvxVRM?editors=1100

推荐答案

更改@keyframes中的不透明度.

Change opacity in @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('dummyimage/600x400/000/fff&text=one')"></li> <li style="background-image: url('dummyimage/600x400/000/fff&text=two')"></li> <li style=" background-image: url('dummyimage/600x400/000/fff&text=three');"></li> <li style="background-image: url('dummyimage/600x400/000/fff&text=four')"></li> </ul>