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