CSS颜色之间的切换不会平滑过渡[重复]答案

【问题标题】：CSS Switching between colors doesn't transition smoothly [duplicate]CSS颜色之间的切换不会平滑过渡[重复]
【发布时间】：2021-05-09 05:38:13
【问题描述】：

我正在尝试使用 betterdiscord 让 --main-color 平滑地穿过彩虹的颜色。然而，尽管定义了transition-timing-function设置为linear，它还是会从一个颜色跳到另一个颜色，而不是平滑过渡。

@keyframes RGB_TEXT {
    from {--main-color: rgb(255 0 0);}
    15% {--main-color: rgb(255 165 0);}
    31% {--main-color: rgb(255 255 0);}
    46% {--main-color: rgb(0 128 0);}
    61% {--main-color: rgb(0 0 255);}
    76% {--main-color: rgb(75 0 130);}
    92% {--main-color: rgb(238 130 238);}
    to {--main-color: rgb(255 0 0);}
}

:root {
    animation: RGB_TEXT 10s linear infinite;
}

【问题讨论】：

您永远不会调用您希望应用变量的 css 属性。为什么不将颜色静态应用到关键帧中的背景属性？
@dalelandry BetterDiscord 根据我的经验调用 --main-color，这就是 Xoniterfos 使用它的目的（它也不是背景颜色；许多不同的组件，如文本、线条、某些元素的背景等调用在同一个道具上）。 BD 主题代码可能会有所帮助，尽管它相当长，并且找到可能导致错误的相关行可能比真正的问题更难（无论是什么）

标签： css css-animations

【解决方案1】：

您必须在 root 中定义 vars 并在 @keyfarames 中使用背景颜色与此代码相同

@keyframes RGB_TEXT {
    from {background-color:var(--main-color);}
    15% {background-color:var(--main-color);}
    31% {background-color:var(--main-color2);}
    46% {background-color:var(--main-color3);}
    61% {background-color:var(--main-color4);}
    76% {background-color:var(--main-color5);}
    92% {background-color:var(--main-color2);}
    to {background-color:var(--main-color3);}
}

:root {
    --main-color :rgb(255, 0 ,0); 
    --main-color2 : rgb(255, 165 ,0); 
    --main-color3 : rgb(255 ,255, 0) ;
    --main-color4 : rgb(0 ,128, 0) ;
    --main-color5 : rgb(75, 0, 130) ;
    animation: RGB_TEXT 10s linear infinite;
}

【讨论】：

【解决方案2】：

尝试使用cubic-bezier。

代码 sn-p：

@keyframes RGB_TEXT {
    from {background-color: rgb(255 0 0);}
    15% {background-color: rgb(255 165 0);}
    31% {background-color: rgb(255 255 0);}
    46% {background-color: rgb(0 128 0);}
    61% {background-color: rgb(0 0 255);}
    76% {background-color: rgb(75 0 130);}
    92% {background-color: rgb(238 130 238);}
    to {background-color: rgb(255 0 0);}
}

body {
    animation: RGB_TEXT 20s cubic-bezier(0, -0.4, 1, 1.35) infinite;
}

【讨论】：

不幸的是，这似乎也不起作用。我认为这是在 Discord 中运行的动画的问题，因为我尝试了每种类型的过渡时间功能都没有成功。

【解决方案3】：

这里有一个例子，可以像彩虹一样平滑地改变你的背景你可以得到你想要的结果：

:root { 
  height: 100%;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

【讨论】：

如果我的回答解决了你的问题，你可以验证一下；否则，仍然感谢对时间的投票:)