CSS animation, FadeIn / FadeOut 2 images continuously

Question

I have created sample CodePen here.

I tried below but didn't work.

 .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; }
    }

As you will see this sample has 3 images. I give them id = "imge1", "imge2", "imge3"

img3 keeps rotating using keyframe.

I need to show img1 and img2 showing kinda fadein-fadeout effect.

so when img3 rotates to bottom that time may be fadeout img1 and fadeIn img2. (or other way around is fine)

basically 2 images should keep replacing with some fade effect and img3 keeps rotating.

Here is a link I tried but could not achieve solution. CSS animation, fade in fade out opacity on automated slideshow

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

also, this needs to be done using pure-css only. I have to put this in nextjs project. Thanks

Answer 1

You need animation-delay and animation-iteration-count to achieve that

*{
  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

Basically, you need to apply 2 different animation functions to the different elements. I have used z-index to let the images overlap each other and set the infinite property for the duration of your animation. You can set an interval for your images using animation-delay.

  .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;
    }
}

Created this pen: https://codepen.io/spaceCadett/pen/wvKKowL

Answer 3

See below. I added a background color to the third image to make it visible.

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