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;
        back         


        

Answer 1

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 2

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