CSS动画，淡入/淡出连续2张图像

Question

我创建了示例CodePen在这里。

我在下面尝试过，但是没有用。

 .elementToFadeInAndOut {
        width:200px;
        height: 200px;
        background: red;
        -webkit-animation: fadeinout 4s linear forwards;
        animation: fadeinout 4s linear forwards;
    }

    @-webkit-keyframes fadeinout {
      0%,100% { opacity: 0; }
      50% { opacity: 1; }
    }

    @keyframes fadeinout {
      0%,100% { opacity: 0; }
      50% { opacity: 1; }
    }

您将看到此示例具有3张图像。我给他们id = "imge1"，"imge2"，"imge3"

img3使用关键帧保持旋转。

我需要显示img1和img2表现出某种淡入淡出效果。

因此，当img3旋转到底部时，时间可能是淡出img1和fadeIn img2。 （或者其他方法也可以）

基本上，2张图像应继续替换为淡入淡出效果，并且img3保持旋转。

这里是我尝试过的链接，但无法实现解决方案。CSS animation, fade in fade out opacity on automated slideshow

CSS how to make an element fade in and then fade out?

而且，这仅需要使用纯css完成。我必须把它放在nextjs项目中。谢谢

Answer 1

请参见下文。我在第三张图像中添加了背景色以使其可见。

#img3 {
  background-color: red; /* to make it visible */
}

.flexDisplay {
  display: flex;
}

.wrapper {
  display: flex;
  justify-content: space-evenly;
}

.loginImage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.img1 {
  animation: spin 3s linear infinite;
  opacity: 0.1;
  width: 200px;
  height: 200px;
  align-items: center;
}

.elementToFadeInAndOut {
  width: 200px;
  height: 200px;
  background: red;
  animation: fadeinout 4s linear infinite;
}

@keyframes fadeinout {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

<div class="flexDisplay">
  <div class="wrapper">
    <img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png  " class="loginImage" alt="branding logo" />
    <img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />

    <img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />

  </div>
</div>

Answer 2

您可以通过创建一个从0到1的不透明度，保持在那里，然后再回到0的关键帧来做到这一点。

所有三个图像都具有相同的动画，但是我们会完美地延迟它们，以便当第一个开始淡出时，第二个开始淡入。

.ctnr {
  position: relative;
  width: 200px;
  height: 200px;
}
.img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}


.one {
  background: red;
  animation: fadeinout 5000ms infinite;
}

.two {
  background: green;
  animation: fadeinout 5000ms infinite;
  
  /* there are 3 images, so we delay this one by 1/3 the total time */
  animation-delay: 1666ms;
}

.three {
  background: blue;
  animation: fadeinout 5000ms infinite;
  
  /* we delay this by 2/3 the total time */
  animation-delay: 3333ms;
}


@keyframes fadeinout {
  0% {
    opacity: 0;
  }
  
  /* this is the transition "speed".             */
  /* be sure to add this percent to the next one */
  9% {
    opacity: 1;
  }
  
  /* for 3 images, we start fading out at 33% */
  /* for 4 images, it would be 25%.  etc      */
  33% {
    opacity: 1;
  }
  
  /* as we fade out, another will be fading in.  */
  /* so this should be 33% + 9%.                 */
  42% {
    opacity: 0;
  }
}
<div class="ctnr">
  <div class="img one"></div>
  <div class="img two"></div>
  <div class="img three"></div>
</div>

在示例中，one立即消失。在5000ms的33％时，它开始淡出。这正是我们延迟了two-1666ms的时间，所以one将随着two开始淡入而开始淡出。

[同样，two将在3333ms时开始淡出，这正是three开始淡入的时间。

最后，three将在5000ms处开始淡出，这正是one开始淡入的时间。

此过程从那里重复。