Animações Load CSS

HTML

</div>
             ____________________________

CSS

.animacao{
                display: flex;
                justify-content: space-around;
                width: 118px;
                height: 118px;
               
            }

.animado1{
                position: relative;
                top: 80%;
                width: 30px;
                height: 30px;
                border-radius: 100%;
                background-color: white;
                display: inline-block;
                animation: animado1-1 1s ease-in 0s infinite alternate forwards;
            
            }
            
            .animado1:nth-child(2){
                animation: animado1-2 1s ease-in 0.3s infinite alternate forwards;
            }
            
            .animado1:nth-child(3){
                animation: animado1-3 1s ease-in 0.6s infinite alternate forwards;
            }
            
            @keyframes animado1-1 {
                from{
            
                   top:80%; 
            
            
                }
            
                to{
            
                    top: 20%;
            
                }
                
            }
            
            @keyframes animado1-2 {
                from{
            
                   top:80%; 
            
            
                }
            
                to{
            
                    top: 20%;
            
                }
                
            }
            
            @keyframes animado1-3 {
                from{
            
                   top:80%; 
            
            
                }
            
                to{
            
                    top: 20%;
            
                }
                
            }