四个图像的平滑CSS动画

Question

我有三张我想要动画的图片，我希望它们从1->2->3->2无限循环，每次转换都是ease-in-out。我已经这样做了，但是当动画重新开始循环时，即从2->1开始，它是突然的，而不是像我希望的那样缓和。

我怀疑动画不是通过淡入开始，如何修复？

#cf {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}
#cf img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
@keyframes cfFadeInOutFirst {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cfFadeInOutThird {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#cf img.cf-first {
  animation-name: cfFadeInOutFirst;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
}
#cf img.cf-third {
  animation-name: cfFadeInOutThird;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
}

<div id="cf">
  <img src="https://placehold.it/250/ff0000/000000" />
  <img class="cf-third" src="https://placehold.it/250/00FF00/000000" />
  <img class="cf-first" src="https://placehold.it/250/0000FF/000000" />
</div>

减少CSS代码：我使用animation-delay属性错开第三帧，但第一帧和第三帧没有缓和。

Answer 1

这是因为cfFadeInFirst从不透明度1开始......它需要从0开始：

＆＃13;

＆＃13;

#cf {
  position: relative;
}
#cf img {
  position: absolute;
  transition: opacity 1s ease-in-out;
}
@keyframes cfFadeInOutFirst {
  0%   {opacity: 0;}  
  10%  {opacity: 1;}  
  100% {opacity: 0;}
}
@keyframes cfFadeInOutThird {
  0%   {opacity: 0;}
  55%  {opacity: 1;}
  100% {opacity: 0;}
}
img.cf-first {
  animation: 10s ease-in-out 0s cfFadeInOutFirst infinite;
}
img.cf-third {
  animation: 10s ease-in-out 0s cfFadeInOutThird infinite;
}

＆＃13;

<img src="https://placehold.it/100/ff0000/000000" />
<img src="https://placehold.it/100/00FF00/000000" class="cf-third" />
<img src="https://placehold.it/100/0000FF/000000" class="cf-first" />

<div id="cf">
  <img src="https://placehold.it/100/ff0000/000000" />
  <img src="https://placehold.it/100/00FF00/000000" class="cf-third" />
  <img src="https://placehold.it/100/0000FF/000000" class="cf-first" />
</div>

＆＃13;

＆＃13;

＆＃13;