how to implement my CSS transition to my website - css

Question

I have to create button animation like below:
https://media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif
I did it with "transition" but now can't implement that solution to my website.
my button animation solution: http://jsfiddle.net/guhqcxzt/
My website part where I wanna implement it on 'li' tags. (html and scss)
<nav class="left-side">
<ul class="navigations">
<li>ABOUT US</li>
<li>HOTEL</li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
nav,
.left-side {
#include flex(space-between, center, column);
min-height: 90vh;
background: $color-grey-dark-1;
padding: 5rem 0 3rem 0;
width: 18%;
color: $color-grey-light-1;
}
.navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
}
}
}
a:hover {
background: $color-primary-light;
}

Answer 1

try this :
add transition in <a> tag
navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
transition:0.5s;
}
}
}
a:hover {
background: $color-primary-light;
}

Answer 2

do you want this one?
try this code :
nav,.left-side
{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 90vh;
background: black;
padding: 4rem 0 3rem 0;
width:300px;
color: grey;
}
.navigations
{
width: 100%;
}
li
{
position:relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 100px;
}
li::before
{
content:'';
position:absolute;
width:0%;
height:70px;
background:red;
left:-20px;
transition:0.5s;
}
li:hover::before
{
width:100%;
}
a
{
position:relative;
color: grey;
margin: 0.5rem 0;
width:92.4%;
text-decoration:none;
}
.rights {
font-size: 1.5rem;
}
<nav class="left-side">
<ul class="navigations">
<li >ABOUT US</li>
<li> HOTE </li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>