CSS 动画，FadeIn / FadeOut 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旋转到底部时，可能是fadeout 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

您需要 animation-delay 和 animation-iteration-count 来实现这一目标

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
figure{
  width: 100vw;
  height: 50vh;
  position: relative;
  background: green;
  text-align: center;
}
picture{
  position: relative;
  display: inline-block;
  width: 25%;
}
picture img{
  width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
  background: red;
  animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
  background: red;
  animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
  animation: spin 4s linear infinite;
}
figcaption{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
} 
 
@keyframes fadeinout { 
  50% { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg);}
}

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

Answer 2

基本上，您需要对不同的元素应用 2 种不同的动画功能。 我使用 z-index 让图像相互重叠，并且 在动画期间设置无限属性。 您可以使用动画延迟设置图像的间隔。

  .flexDisplay{
     display: flex;
     background: #f1f1f1;
}
 .wrapper{
     display: flex 
}
 .img1{
     z-index:3;
}
 .loginImage1{
     width: 100%;
     height: 100%;
     position:absolute;
     left:0;
     top:0;
     z-index:1;
}
 .loginImage2{
     width: 100%;
     height: 100%;
     position:absolute;
     left:0;
     top:0;
     z-index:2;
}
 @keyframes spin {
     from {
        transform:rotate(0deg);
    }
     to {
        transform:rotate(360deg);
    }
}
 .img1{
     animation: spin 3s linear infinite;
     width: 200px;
     height: 200px;
     align-items: center;
}
 .img2{
     position: relative;
     width: 200px;
     height: 200px;
}
 .elementToFadeInAndOut1 {
     width:200px;
     height: 200px;
     background: red;
     -webkit-animation: fadeinout 4s linear infinite;
     animation: fadeinout 4s linear infinite;
}
 @-webkit-keyframes fadeinout {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}
 @keyframes fadeinout {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}
 .elementToFadeInAndOut2 {
     width:200px;
     height: 200px;
     background: red;
     -webkit-animation: fadeinout 4s linear infinite;
     animation: fadeinout 4s linear infinite;
     animation-delay:5s;
}
 @-webkit-keyframes fadeinout1 {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}
 @keyframes fadeinout1 {
     0%,100% {
         opacity: 0;
    }
     50% {
         opacity: 1;
    }
}

创建了这支笔：https://codepen.io/spaceCadett/pen/wvKKowL

Answer 3

见下文。我为第三张图片添加了背景颜色以使其可见。

#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>