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

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

  img1
  img2
  
    
  
  
Css Labs