CSS animation (newbie help)?

Question

css

Good afternoon
Friends! Help me please. I'm a beginner Web Developer, started learning Animations and got into trouble. When laying out the site according to the layout, there was animation on hover (when hovering at the bottom of the link, a stick appeared and eventually stretched to the length of the entire container, a link to the site with an example -

beloweb.ru/javascript-jquery/10-neveroyatnyih-effe...

(2 block))
What is the problem?
I tried to create a separate rectangle, which at first was the width of the entire link, and when clicked, it instantly collapsed to the size of the desired element (that is, a small stick at the bottom), but the problem is that the animation of the stick should be smooth, and so that it does not abruptly stop , it is necessary to abruptly move the mouse to an object one pixel wide (that is, it collapses and becomes small, the mouse is no longer in the block area and the animation stops automatically.
Please help me how to solve this problem or how to implement it differently, I know this very trite things, but I'm a newbie, so sorry :)) Best
regards,
newbie

.nav1{
  width: 15vh;
  height: 10vh;
  background-color: blue;
  z-index: 0;
  display: block;
  position: absolute;
  top: 1px;

}
.nav11{
  width: 15vh;
  height: 10vh;
  background-color: red;
  z-index: 1;
  display: block;
  position: absolute;
  top: 1px;

}
a.nav11{
  transition-property: all;
  transition-duration: 0s;
  z-index: 0;
}
a.nav1:hover{
  height: 1vh;
  z-index: 100;
}
li.nav11{
  transition-property: all;
  transition-duration: 1s;
  z-index: 0;

}
li.nav11:hover{
  width: 20vh
}

<li><a class="nav11"><span class="nav1"></span></a></li>

Answer 1

would you rather do everything in codepen and then throw a question so that you can quickly see everything and help