.div1{
    background-color: black;
    color: white;
    text-align: center;
}

.box-1{
    width: 250px;
    height: 250px;
    background-color: aqua;
    border-radius: 20px;
    /* align-items: center;
    justify-items: center; */
    margin-left: 300px;
    animation-name: round;
    animation-timing-function: ease-in-out;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-delay: 3s;
}

*{
    background-color: black;
}

@keyframes round{
    from{
        border-radius: 20px;
        background-color: red;
    }
    to{
        border-radius: 200px;
        background-color: aqua;
    }
}

.box-2{
    margin-top: 100px;
   width: 250px;
    height: 250px;
    background-color: aqua;
    border-radius: 20px;
    /* align-items: center;
    justify-items: center; */
    margin-left: 300px;
    animation-name: BG;
    /* animation-timing-function: ease-in-out; */
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-delay: 1s;
} 

@keyframes BG{
    from{
        background-color: red;
    }
    to{
        background-color: aqua;
    }
}