CSS background image animation turn to blank

Question

Here is a DEMO for my problem. When the background animation change the opacity, a white layer appear. How to fix this problem, and make animation play as it should be?

HTML

<main>
  <div class="main-headers">
    <div class="headers">
      <h1>This is Broadcast</h1>
      <p>Let's Go!</p>
      <a href="#">Play</a>
    </div>
  </div>
</main>

CSS

main {
  background: black;
  width: 100%;
  height: 850px;
  animation: BackgroundFadeIn 2.5s 2s forwards;
}

@keyframes BackgroundFadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
    background: black url("https://i.ibb.co/KGt62z0/banner.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  100% {
    opacity: 1;
    background: black url("https://i.ibb.co/KGt62z0/banner.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

Answer 1

If you are asking to remove the white layer, just add a background color to your body-element:

body{
  background: black;
}