四个图像的平滑CSS动画

时间:2017-01-24 18:13:39

标签: css css3 css-animations

我有三张我想要动画的图片,我希望它们从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属性错开第三帧,但第一帧和第三帧没有缓和。

1 个答案:

答案 0 :(得分: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;