CSS-анимация слегка мерцает

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>