Css making transition of margin and padding - html

Question

I made a navigator on top of my website, I want it to shrink a bit when I hover over it.
.top-container ul>li{
display: inline;
float: left;
margin: 5px 15px;
padding: 0;
scale: 1;
background-color: white;
border: solid 0px #333;
transition: padding ease-out .3s, margin ease-out .3s,
border ease-out .3s, background-color ease-out .3s;
}
.top-container ul>li:hover{
background-color: red;
padding: 5px 15px;
margin: 0;
}
(its not the full code of style sheet!)
okay so when I use this code, my list elements starting to shake when I hover over.
how can I solve this problem?
or is there a more efficient way to do this?
Also i tried scale and Transform: scale(); did not give me what i want because they scaled up the text and border too D:
Here is the Web site the issue is current.
https://akiokiyota.github.io/RemoteWebsite/

Answer 1

You need to separate the text and visual components. The text does not change, so it makes no sense to animate the entire block with text, but will be limited only to decoration when hovering.
Another very bad practice is that the size of the menu item (element a) is smaller than the element li, pointing at which activates the animation. This may confuse the user.
How would I do:
header {
display: flex;
align-items: center;
font-family: sans-serif;
font-stretch: condensed;
}
header a {
text-decoration: none;
color: #333;
}
.logo {
margin-right: auto;
font-size: 300%;
font-weight: 400;
}
.top-container {
white-space: nowrap;
}
.top-container ul,
.top-container li {
list-style: none;
display: inline;
}
.top-container ul>li>a {
font-size: 120%;
padding: 5px 15px;
position: relative;
}
.top-container ul>li>a::after {
content: "";
z-index: -1;
position: absolute;
background-color: red;
transition: ease-out 0.3s;
width: 0;
height: 0;
left: 50%;
top: 50%;
}
.top-container ul>li>a:hover::after {
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<header>
<h1 class="logo">QZEN</h1>
<div class="top-container">
<ul>
<li>HOME</li>
<li>GAMES</li>
<li>ARTS</li>
<li>ASSETS</li>
<li>ABOUT</li>
</ul>
</div>
</header>