Ich verstehe nicht, warum das Div ohne Animation in seinen Normalzustand zurückkehrt. Ich habe alles versucht
Das ist mein Code:

Ich habe an vielen Stellen gesucht, kann das Problem aber nicht finden.

Das ist mein 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)); }

Ich versuche, die Höhe in 1 Sekunde von 250 Pixel auf 850 Pixel und in 1 Sekunde wieder auf 250 Pixel zu ändern