How to fix CSS "transition" un-hover an element? - css

Question

I have a nav bar on the left corner of the page. the nav bar is already set on margin-left: -120px; on hover, it transforms to 105px, so I would like to have smooth back when un-hover the element.
I have tried to use transition on the ul, ul li, ul li a, putting them in different classes. nothing really working with me...
/* ----- NAVBAR ----- */
ul {
position: fixed;
z-index: 99;
}
.li1{
animation: move1 2s;
}
.li2{
animation: move1 3s;
}
.li3{
animation: move1 4s;
}
.li4{
animation: move1 5s;
}
.li5{
animation: move1 6s;
}
ul li {
text-align: center;
list-style: none;
padding-top: 10px;
margin-left: -120px;
}
ul li a {
text-align: center;
display: block;
text-decoration: none;
height: 30px;
line-height: 30px;
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
background: #1a2738;
width: 140px;
color: #fff;
text-transform: capitalize;
border-radius: 15px;
}
ul li a:hover {
background: #1a2738;
color: #fff;
animation: move2 1s forwards;
}
#keyframes move1 {
0% {
opacity: 0;
transform: translate(-50px);
}
40% {
opacity: 100;
transform: translate(105px);
}
}
#keyframes move2 {
100% {
transform: translate(105px);
}
}
I hope to know what's the actual problem, help please, thanks!

Answer 1

I think you are over complicating the CSS using keyframes you can use a transition instead see below code:
/* ----- NAVBAR ----- */
ul {
position: fixed;
z-index: 99;
}
ul li {
text-align: center;
list-style: none;
padding-top: 10px;
margin-left: -120px;
}
ul li a {
text-align: center;
display: block;
text-decoration: none;
height: 30px;
line-height: 30px;
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
background: #1a2738;
width: 140px;
color: #fff;
text-transform: capitalize;
border-radius: 15px;
transition: transform 1s ease-in-out;
transform: translateX(-50px);
}
ul li a:hover {
background: #1a2738;
color: #fff;
transform: translateX(105px);
}

Answer 2

If you are looking for a simple slide out and slide back in effect, one way to approach it is to simple use transform: transitionX(-120px) on your ul element, and just readjust the value from -120px to 0px on the hover of the ul, like so:
ul {
list-style-type: none;
padding: 1em;
background-color: #ececec;
color: #333;
display: inline-block;
transition: transform 600ms;
transform: translateX(-120px);
}
ul:hover {
transform: translateX(0px); //you can adjust this measurement unit to whatever value you wish, such as 105px
}
ul li {
text-align: center;
list-style: none;
padding-top: 10px;
}
ul li a {
text-align: center;
display: block;
text-decoration: none;
height: 30px;
line-height: 30px;
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
background: #1a2738;
width: 140px;
color: #fff;
text-transform: capitalize;
border-radius: 15px;
}
<ul>
<li>Home</li>
<li>About</li>
<li>contact</li>
</ul>