如何修复由 CSS 动画引起的奇怪色带？
Posted
技术标签:
【中文标题】如何修复由 CSS 动画引起的奇怪色带？【英文标题】：How to fix odd color banding caused by CSS animation? 【发布时间】：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 在我的手机上尝试了该页面，有条带。 【参考方案1】：想通了！
显然animation-fill-mode: both; 导致一些 div 在动画播放之前就变得透明了。
将其设置为 animation-fill-mode: forwards; 已修复。
【讨论】：
以上是关于如何修复由 CSS 动画引起的奇怪色带？的主要内容，如果未能解决你的问题，请参考以下文章
如何修复由 SpringSecurity 引起的 Forbidden 403 错误？