Div moves slightly to right after animation finishes-CodePudding

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

CodePudding user response：

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 >
  <div >
     hello
  </div>
</div>

CodePudding user response：

This is caused by changes in the scroll bar, because the width of the <body> element does not include the scroll bar. For example, in one test, the width of the iframe is 1920px; the width of the body is 1887px at the start of the animation, but it is 1904px wide at the end of animation.

The position of the button is centered, which means, as the body gets wider, the button must go right.

One simple way to deal with it is to either always show the scrollbars:

body { overflow-y: scroll}

or always hide it (by hiding parts of the button outside the body)

body { overflow-y: hidden }