title: How to fix odd color banding caused by CSS animation?
body: <h2>Hello everyone.</h2>
  <p>I have started making a small app in <strong>Electron</strong>, and want to make a loading screen.</p>
  <p>But every time I add the animation to the container div, it gives <strong>its background color weird color banding</strong>.</p>
  <p><a href="https://i.stack.imgur.com/c8Rqx.png" rel="nofollow noreferrer">Here's an image of it.</a></p>
  <p>Basically the top is a color I do not even use anywhere, while the bottom is the actual color I want.</p>
  <p><a href="https://i.stack.imgur.com/dFuSk.png" rel="nofollow noreferrer">Here's an image with the animation disabled.</a></p>
  <h3>What I tried:</h3>
  <ol>
  <li>Ran the website in <strong>Edge</strong>, <strong>did produce the color banding</strong>.</li>
  <li>Ran the website in the <strong>snippet, did not produce the color banding</strong>.</li>
  <li>Tried setting the background color in the animation itself, did not fix the problem.</li>
  </ol>
  <h3>Here's my code:</h3>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&amp;family=Roboto&amp;display=swap');
  :root {
    --main1: #282b30;
    --main2: #1e2124;
    --main3: #16181a;
    --titleFont: 'Nunito', sans-serif;
    --textFont: 'Roboto', sans-serif;
    --textColor: #ffffff;
  }
  
  * {
    font-family: var(--textFont);
    color: white;
  }
  
  html {
    height: 100%;
  }
  
  body {
    overflow: hidden;
  }
  
  .transitionContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main2);
    color: var(--textColor);
    font-size: 500%;
    animation-name: hideTransition;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    animation-delay: 1.25s;
    animation-fill-mode: both;
    opacity: 1;
  }
  
  @keyframes hideTransition {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(1.5);
      opacity: 0;
      z-index: -1;
    }
  }
  
  @keyframes showTransition {
    from {
      transform: scale(1.5);
      opacity: 0;
      z-index: -1;
    }
    to {
      transform: scale(1);
      opacity: 1;
      z-index: 0;
    }
  }
  
  .logoText {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -49.258px;
    margin-top: -96px;
  }
  
  .loadingBarBack {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background-color: var(--main3);
  }
  
  .loadingBarFront {
    width: 0%;
    height: 100%;
    background-color: limegreen;
    animation: loading 1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes loading {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  
    &lt;link rel="stylesheet" href="index.css"&gt;
  
    &lt;script src="./index.js" defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="transitionContainer"&gt;
      &lt;h1 class="logoText"&gt;R&lt;/h1&gt;
      &lt;div class="loadingBarBack"&gt;
        &lt;div class="loadingBarFront"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Thanks for any help in advance!</strong></p>