@keyframes animar {
    from {width: 10px; height: 10px; background-color: rgb(86, 86, 88, 0.4);opacity: 0;scale: 0.1;}
    to {width: 50%; height: 500px; background-color: rgb(86, 86, 88, 0.8);opacity: 1;scale: 1;}
}


#caja{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 500px;
    background-color: rgb(86, 86, 88, 0.8);
    margin: 0 auto;
    opacity: 1;
    animation: animar 10s;  
    animation-delay: 0s;
    border-radius: 50%;
}

.img_art{
    max-width: 80%;
} 

@media screen and (max-width: 900px){
    @keyframes animar {
        from {width: 10px; height: 10px; background-color: rgb(86, 86, 88, 0.4);opacity: 0;scale: 0.1;}
        to {width: 80%; height: 300px; background-color: rgb(86, 86, 88, 0.8);opacity: 1;scale: 1;}
    }
    #caja{
    height: 300px;
    width: 80%;
    }
}

@media screen and (max-width: 450px){
    @keyframes animar {
        from {width: 10px; height: 10px; background-color: rgb(86, 86, 88, 0.4);opacity: 0;scale: 0.1;}
        to {width: 90%; height: 250px; background-color: rgb(86, 86, 88, 0.8);opacity: 1;scale: 1;}
    }
    #caja{
    height: 250px;
    width: 90%;
    }
}