Powracająca animacja do pierwotnego stanu : hover

[Kabatus]

Witam, interesuje mnie jak zrobić animowany hover powracający do pierwotnego stanu:

 

https://lulisypialnie.pl- tak jak tutaj w menu,

po najechaniu kursorem wysuwa się od góry tło, ale po zjechaniu kursorem nie wraca tylko znika, a ja chce zachować płynność, czyli wysuwa się i zasuwa po zjechaniu. 

[Kabatus]

Nikt nie zna odpowiedzi? 

[dziki_rysio_997]

Proszę bardzo - wydłubałem to, czego potrzebujesz.
 

<style>
#menu-top a:hover {background-image:url(https://lulisypialnie.pl/img/menu-hover.jpg); background-repeat:no-repeat; background-position: bottom; color:white; animation: a-hover 0.5s ease;}

@keyframes a-hover {
  0% {
background-position:50% -100px;
color:#16296a;
  }
}
#ala {
    font-size:26px;
    padding-top: 100px;
    padding-bottom: 50px;
}
</style>
<div id="menu-top"><a href="#" id="ala">Ala ma kota</a></div>