CSS Animation flickering slightly - html

Question

I am trying to experiment with CSS Animation and made a simple page transition effect using only Css animation. The problem is when the animation completes, a slight flicker is created. Can you guys suggest some thing to fix this?
Codepen link- https://codepen.io/jake2917/pen/qyzxva?editors=1100
Here is the code.
The problem start when i try to center the h1 tag.
body {
margin: 0;
padding: 0;
}
#line {
border: 0.5px solid #130f40;
opacity: 0;
width: 0;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: block;
top: 50%;
animation-name: run;
animation-duration: 1s;
transition: 0.1s ease-in;
}
#container1 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
top: -110%;
transition: 0.2s ease-in;
animation-name: cover1;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#container2 {
width: 100%;
opacity: 0;
background-color: #ff7979;
position: absolute;
bottom: -110%;
transition: 0.2s ease-in;
animation-name: cover2;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes run {
from {
width: 0;
opacity: 0;
}
to {
width: 99%;
opacity: 1;
}
}
#keyframes cover1 {
0% {
top: -10%;
opacity: 0;
height: 0;
}
100% {
top: 0%;
opacity: 1;
height: 50vh;
}
}
#keyframes cover2 {
0% {
bottom: -110%;
opacity: 0;
height: 0;
}
100% {
bottom: 0%;
opacity: 1;
height: 50vh;
}
}
// ADDING THIS LINE MAKE IT FLICKER
#container1 h1 {
text-align: center;
}
<div id="line"></div>
<div id="container1">
<h1>hello there</h1>
</div>
<div id="container2">
<h1>hello there</h1>
</div>

Answer 1

It is flickering left right because you have a content that is more than 100% of the body, html.
In many browsers they are adding a scroll bar and it pushed the content to the left.
What you need to do is to add a simple css code overflow: hidden. This way the content will be hidden, the body remains 100% height and the browser won't add scrollbar;
body {
overflow:hidden;
}