Collapse animation when stop :hover - html

Question

I'm having a lot of troubles trying to do this. I finally found how to do an expansion animation for an aside menu im doing, when I hover one of its elements.
The problem is that i want to do an animation to close it as well. I tried making an animation as the open animation (with from -> to) and it doesn't work.
I tried making transitions with max height, using the different containers in the list (ul, div, li, whatever one by one), I tried searching different kinds of already made animations, but none worked, the menu just pop out and disappear without animation.
What I basically want is a smooth animation to move the other elements down (reached), and then up when the menu closes.
Actually it has 2 animations: to expand the max height, and to move it from right to left. but I can't reach to close it with animation.
I don't want to use Javascript, because is for school project but we haven't seen it yet.
https://jsfiddle.net/exrp4doa/
#-webkit-keyframes slider {
from {
border-left: 300px
}
to {
border-left: 0px
}
}
#keyframes slider {
from {
margin-left: 300px
}
to {
margin-left: 0px
}
}
#-webkit-keyframes altura {
from {
max-height: 0px
}
to {
max-height: 500px
}
}
#keyframes altura {
from {
max-height: 0px
}
to {
max-height: 500px
}
}
aside {
width: 25%;
display: inline-block;
vertical-align: top;
margin-top: 20px;
margin-bottom: 20px;
}
aside > div:not(#marcador) {
background-color: rgb( 40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-top: 5px;
margin-right: -15px;
font-family: 'Press Start 2P';
font-size: 0.7em;
line-height: 10px;
padding: 15px;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
#marcador div {
display: none;
opacity: 0;
visibility: hidden;
position: static;
}
#marcador li:hover >div {
display: block;
opacity: 1;
visibility: visible;
padding-left: 20px;
-webkit-animation-name: slider;
-webkit-animation-duration: 0.5s;
animation-name: slider;
animation-duration: 0.5s;
}
#marcador li li {}
#marcador li:hover li {
-webkit-animation-name: altura;
-webkit-animation-duration: 5s;
animation-name: altura;
animation-duration: 5s;
}
#marcador li:hover >a {
display: block;
opacity: 1;
visibility: visible;
}
#marcador ul {
margin: 0;
padding: 0;
list-style-type: none;
position: static;
}
#marcador ul li>a {
background-color: rgb( 40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-top: 5px;
margin-right: -15px;
font-family: 'Press Start 2P';
font-size: 0.7em;
line-height: 10px;
padding: 15px;
padding-left: 35px;
}
#marcador ul ul {
padding: 0;
margin: auto;
}
#marcador ul ul a {
margin-left: 20px;
background-color: dimgray;
}
#marcador ul ul ul a {
margin-left: 40px;
background-color: gray;
color: black;
}
#marcador img {
float: left;
vertical-align: middle;
display: inline-block;
opacity: 0;
position: absolute;
visibility: hidden;
margin-left: -20px;
}
#marcador li:hover>a>img {
opacity: 1;
visibility: visible;
}
#marcador a:hover {
color: orange;
}
<aside>
<div id="marcador">
<ul>
<li>
<a><img src="Recursos/Select.png" />Inicio</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Juegos</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />Sega</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />Arcade</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Nintendo</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />NES</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Consolas</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES Mini</a>
</li>
<li>
<a><img src="Recursos/Select.png" />NES Mini</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />SEGA GENESIS</a>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Compras</a>
</li>
<li>
<a><img src="Recursos/Select.png" />DIY</a>
</li>
<li>
<a onclick="alert('Página en construcción')"><img id="info" src="Recursos/info.png" alt="INFO" /></a>
</li>
</ul>
</div>
</aside>

Answer 1

You can use transition instead of animation. My demo:
aside {
width: 25%;
display: inline-block;
vertical-align: top;
margin-top: 20px;
margin-bottom: 20px;
}
aside > div:not(#marcador) {
background-color: rgb(40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-top: 5px;
margin-right: -15px;
font-family: "Press Start 2P";
font-size: 0.7em;
line-height: 10px;
padding: 15px;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
#marcador li> div {
opacity: 0;
margin-left: 300px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#marcador li:hover > div {
opacity: 1;
padding-left: 20px;
margin-left: 0;
}
#marcador li> div >ul >li {
max-height: 0;
transition: all 0.5s;
}
#marcador li:hover> div >ul >li {
max-height: 40px;
}
#marcador li:hover{
max-height: 500px !important;
}
#marcador li:hover > a {
display: block;
opacity: 1;
visibility: visible;
}
#marcador ul {
margin: 0;
padding: 0;
list-style-type: none;
position: static;
}
#marcador ul li > a {
background-color: rgb(40, 44, 47);
border-radius: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: silver;
display: block;
margin-right: -15px;
font-family: "Press Start 2P";
font-size: 0.7em;
line-height: 10px;
padding: 15px;
padding-left: 35px;
}
#marcador ul ul {
padding: 0;
margin: auto;
}
#marcador ul ul a {
margin-left: 20px;
background-color: dimgray;
}
#marcador ul ul ul a {
margin-left: 40px;
background-color: gray;
color: black;
}
#marcador img {
float: left;
vertical-align: middle;
display: inline-block;
opacity: 0;
position: absolute;
visibility: hidden;
margin-left: -20px;
}
#marcador li:hover > a > img {
opacity: 1;
visibility: visible;
}
#marcador a:hover {
color: orange;
}
<aside>
<div id="marcador">
<ul>
<li>
<a><img src="Recursos/Select.png" />Inicio</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Juegos</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />Sega</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />Arcade</a>
</li>
<li>
<a><img src="Recursos/Select.png" />Nintendo</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />NES</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Consolas</a>
<div>
<ul>
<li>
<a><img src="Recursos/Select.png" />SNES Mini</a>
</li>
<li>
<a><img src="Recursos/Select.png" />NES Mini</a>
</li>
<li>
<a class=ult><img src="Recursos/Select.png" />SEGA GENESIS</a>
</li>
</ul>
</div>
</li>
<li>
<a><img src="Recursos/Select.png" />Compras</a>
</li>
<li>
<a><img src="Recursos/Select.png" />DIY</a>
</li>
<li>
<a onclick="alert('Página en construcción')"><img id="info" src="Recursos/info.png" alt="INFO" /></a>
</li>
</ul>
</div>
</aside>