CSS Image Fade动画仅在第一次运行 [英] CSS Image Fade Animation Only Runs First Time

问题描述

我正在使用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('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

And a link to Codepen sample: https://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('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>

这篇关于CSS Image Fade动画仅在第一次运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！