Why doesn't the slow rewind functionality in my animation function work?

Question

I don't understand why the div returns to normal without animation. I tried everything
Here is my code:

I've looked in many places but can't find the problem.

<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>

This is my 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));

}

I'm trying to transition the height from 250px to 850px in 1 second and back to 250px in 1 second

Answer 1

You should add the transition attribute to div#slides instead of div#slides:hover.

* {
   margin: 0px;
   padding: 0px;
}

main {
   width: 600px;
   margin: auto;
}

div#slides {
   display: flex;
   width: 600px;
   height: 250px;
   overflow: hidden;
   position: absolute;
   transition: height 1s ease-in-out;
}

div#slides:hover {
   height: 850px;
}

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));
}

<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>