如何修复由 CSS 动画引起的奇怪色带？

Question

大家好。

我已经开始用 Electron 制作一个小应用程序，想制作一个加载屏幕。

但是每次我将动画添加到容器 div 时，它都会它的背景颜色出现奇怪的色带。

Here's an image of it.

基本上顶部是我什至没有在任何地方使用的颜色，而底部是我想要的实际颜色。

Here's an image with the animation disabled.

我尝试了什么：

运行 Edge 中的网站，确实产生了色带。
运行 代码段中的网站，没有产生色带。
尝试在动画中设置背景颜色，但没有解决问题。

这是我的代码：

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Roboto&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%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="index.css">

  <script src="./index.js" defer></script>
</head>

<body>
  <div class="transitionContainer">
    <h1 class="logoText">R</h1>
    <div class="loadingBarBack">
      <div class="loadingBarFront"></div>
    </div>
  </div>
</body>

</html>

提前感谢您的帮助！

Answer 1

想通了！

显然 animation-fill-mode: both; 导致某些 div 在动画播放之前就变得透明了。

将其设置为 animation-fill-mode: forwards; 修复了它。

如何修复由 CSS 动画引起的奇怪色带？

How to fix odd color banding caused by CSS animation?

html

css

electron

大家好。

我尝试了什么：

这是我的代码：

想通了！