Je ne comprends pas pourquoi le div revient à son état normal sans animation. J'ai tout essayé
Voici mon code :

J'ai cherché à plusieurs endroits mais je n'ai pas trouvé le problème.

<div id="quadro_tudo">
            <div id="esq" class="btn" onclick="rolada(this)"></div>
            <div id="slides">
                <div id="imagens">
                   <img src="imagens/image1.png" alt="">
                   <img src="imagens/image2.png" alt="">
                   <img src="imagens/image3.png" alt="">
                </div>
            </div>
            <div id="dir" class="btn" onclick="rolada(this)"></div>
        </div>

Voici mon CSS :

*{
    margin: 0px;
    padding: 0px;
}
main{
    width: 600px;
    margin: auto;
}
div#slides{
    display: flex;
    width: 600px;
    height: 250px;
    overflow: hidden;
    position: absolute;
}
div#slides:hover{
    height: 850px;
    transition: all 1s ease-in-out 0.5s;
}

div#imagens{
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 850px;
    z-index: 1;
}
div#imagens > img{height: 850px;}
div#quadro_tudo{
    display: flex;
    margin: 500px 0px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
div.btn{
    height: 250px;
    width: 75px;
    z-index: 2;
    background-color: rgba(240, 248, 255, 0);
}
div.btn:hover{
    transition: 1s;
}
div.btn#esq:hover{
    background-image: linear-gradient(to right, purple, rgba(255, 255, 255, 0));
    transition-duration: 1s;

}
div.btn#dir:hover{
    background-image: linear-gradient(to left, purple, rgba(255, 255, 255, 0));

}

J'essaie de faire passer la hauteur de 250 px à 850 px en 1 seconde et de revenir à 250 px en 1 seconde