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

【问题标题】：How to fix odd color banding caused by CSS animation?如何修复由 CSS 动画引起的奇怪色带？
【发布时间】：2021-08-16 23:55:04
【问题描述】：

大家好。

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

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

Here's an image of it.

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

Here's an image with the animation disabled.

我尝试了什么：

在 Edge 中运行网站，确实产生了色带。
在sn-p 中运行网站，没有产生色带。
尝试在动画本身中设置背景颜色，没有解决问题。

这是我的代码：

@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>

提前感谢您的帮助！

【问题讨论】：

如果您在不同的显示器或系统上查看该站点，该条带是否仍然存在？
@DavidsaysreinstateMonica 在我的手机上尝试了该页面，有条带。

标签： html css electron

【解决方案1】：

想通了！

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

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

【讨论】：