Mise en place d'une annimation avec delais à chaque itération

Bonjour j'ai un problème qui me casse la tête depuis quelque temps je cherche à mettre en place une annimation avec un delais à chaque itération; j'ai 5 élément à animer donc 5 div et je veux que chaque element s'anime de façon consécutive l'un apres l'autre ceci de facon inifini. pour ça j'ai mis une div pour chaque annimation, ça marche bien pour la premiere itération mais pour la deuxieme tout se complique voici le code svp aidez moi :

                                                       <div class="" id="carre">
                                                       <div class="sec1"  id="col1">
		
                                   
                                  <div id="carre1">    <a href="/"></a> </div>
                               <div id="carre2"><a href=""></a> </div>
                               <div id="carre3"><a href=""></a>  </div>   
                                  <div id="carre4"> <a href=""></a></div>
                                   <div id="carre5"><a href=""></a>   </div>
                                   
                              </div> 
                            </div> 
	      	            </div>

                             

code css:

#carre{
   position:absolute;
    z-index:1;
    width:100%;
    height:100%;
} 
.sec1
 {
   display:flex;
   align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%; 
}

    .carre1:hover, 
.carre2:hover,
.carre3:hover,
.carre4:hover, 
.carre5:hover {
height:16em; width:16em;
background: rgba(40, 40, 40, 0);

}
 
 
.carre1 {   background: rgba(41,98,168, .95);  height:16em; width:16em; margin-right:5px; margin-left:5px; 

 -webkit-animation: anim1 3s;
       -moz-animation: anim1 3s ;
         -o-animation: anim1 3s ;
            animation: anim1 3s ;
        animation-delay:2s;
}
@-webkit-keyframes anim1{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(41,98,168, .95);            
    }    
}
	@-moz-keyframes anim1{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(41,98,168, .95);            
    }    
}
@-o-keyframes anim1{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(41,98,168, .95);            
    }    
}
.carre2 {  background: rgba(31, 11, 97, .9);  height:16em;  width:16em; margin-right:5px;


  -webkit-animation: anim2 3s ;
       -moz-animation: anim2 3s ;
         -o-animation: anim2 3s ;
            animation: anim2 3s ;
       animation-delay:5.1s;
}
@-webkit-keyframes anim2{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(31, 11, 97, .9);            
    }
}
@-moz-keyframes anim2{
    from {
      height:20em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(31, 11, 97, .9);            
    }
}

@-o-keyframes anim2{
    from {
      height:20em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(31, 11, 97, .9);            
    }
}
.carre3  { background: rgba(40, 73, 148, .6);   height:16em;   width:16em; margin-right:5px;  

-webkit-animation: anim3 3s ;
       -moz-animation: anim3 3s ;
         -o-animation: anim3 3s ;
            animation: anim3 3s ;
           animation-delay:8.2s;

		   }
@-webkit-keyframes anim3{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(40, 73, 148, .6);            
    }
} 
@-moz-keyframes anim3{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(40, 73, 148, .6);            
    }
} 
@-o-keyframes anim3{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(40, 73, 148, .6);            
    }
} 

.carre4  { background: rgba(25, 133, 133, .6);  height:16em; width:16em; margin-right:5px;  

-webkit-animation: anim4 3s ;
       -moz-animation: anim4 3s ;
         -o-animation: anim4 3s ;
            animation: anim4 3s ;
            animation-delay:11.3s;
}
@-webkit-keyframes anim4{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(25, 133, 133, .6);            
    }
 } 
 @-moz-keyframes anim4{
   from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(25, 133, 133, .6);            
    }
 }
 @-o-keyframes anim4{
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(25, 133, 133, .6);            
    }
 } 
.carre5  { background: rgba(0,72,149, .9);  height:16em; width:16em; margin-right:5px;  

-webkit-animation: anim5 3s ;
       -moz-animation: anim5 3s ;
         -o-animation: anim5 3s ;
            animation: anim5 3s ;
            animation-delay:14.4s;
			}
@-webkit-keyframes anim5 {
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(0,72,149, .9);            
    }
}
@-moz-keyframes anim5 {
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(0,72,149, .9);            
    }
}
  @-o-keyframes anim5 {
    from {
      height:14em; width:14em;
        background: none;            
    }
    to { height:20em; width:20em;
       
        background: rgba(0,72,149, .9);            
    }
}