Div moves slightly to right after animation finishes

Issue

I have problem with my animation. I have centered my div with position: absolute and setting margin-left and margin-right to auto. The problem occures when the animation fadeIn hits 100 percent, then the div slightly moves to the right. If I remove bottom: 3px, the animation is running without problem, but if the bottom property stays I get this problem and i need this bottom property in order the div to pop from the bottom of the page.

My css:

.header {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 3px;
color: blueviolet;
background-color: whitesmoke;
border: 1.4px solid gray;
width: fit-content;
padding: 0px 100px 0px 100px;
border-radius: 5px;
opacity: 1;
}
.fadeIn{
    animation: fadeIn 2s linear forwards;
}
.fadeOut{
    animation: fadeOut 2s linear forwards;
}
@keyframes fadeIn{
    0% {opacity: 0; transform: translateY(100%);}
    100% {opacity:1; transform: translateY(0%);}
}
@keyframes fadeOut{  
    0% {opacity: 1; transform: translateY(0%);}
    100% {opacity: 0; transform: translateY(100%);}
}

Link to the codepen: here

Solution

You can

• wrap the button in a div,
• position it at bottom with "90% width less the scrollbar width",
• put it in the center

and put the button inside

I set 90% and overflow hidden, because after some tests, I see that 100% and overflow auto in the wrapper creates another ~1px movement when animation ends

.wrap{
  width: calc(90% - (100% - 100vw));
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 3px; /*This for the bottom value*/ 
}
.header {
    position: relative;
    margin: 0 auto;
    left: 0;
    bottom: 3px;
    color: blueviolet;
    background-color: whitesmoke;
    border: 1.4px solid gray;
    width: fit-content;
    padding: 0px 100px 0px 100px;
    border-radius: 5px;
    opacity: 1;
}
.fadeIn{
    animation: fadeIn 2s linear forwards;
}
.fadeOut{
    animation: fadeOut 2s linear forwards;
}
@keyframes fadeIn{
    0% {opacity: 0; transform: translateY(100%);}
    100% {opacity:1; transform: translateY(0%);}
}
@keyframes fadeOut{  
    0% {opacity: 1; transform: translateY(0%);}
    100% {opacity: 0; transform: translateY(100%);}
}

<div class="wrap">
  <div class="header fadeIn">
     hello
  </div>
</div>

Answered By - Daniele Rugginenti