CSS Switching between colors doesn't transition smoothly

Question

I'm trying to have --main-color move smoothly through the colors of the rainbow using betterdiscord. However, despite defining the transition-timing-function set to linear, it jumps from color to color instead of transitioning smoothly.

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

You are never calling on the css property you want your variables to be applied to. Why not just statically apply the color to the background property in your keyframe? — dale landry, May 09 '21 at 06:20
@dalelandry BetterDiscord calls on `--main-color` from my experience which is what Xoniterfos is using this for (it's also not the background color; many different components like text, lines, certain elements' backgrounds, etc call on the same prop). the BD theme code might help though it is rather long and finding the relevant lines that might be causing the bug would likely be harder than the real problem (whatever that may be) — hyper-neutrino, May 09 '21 at 06:25

score 2 · Answer 1 · answered May 09 '21 at 05:50

you must define vars in root and use background-color in @keyfarames same this code

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

score 2 · Answer 2 · answered May 09 '21 at 05:55

2

Try using cubic-bezier.

Code snippet:

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

answered May 09 '21 at 05:55

cursorrux

1,382
4
9
20

Unfortunately this doesn't seem to work either. I believe it is an issue with animations running in Discord, because I tried each type of transition-timing-function without any success. – Xoniterfos May 09 '21 at 06:03

score 2 · Answer 3 · answered May 09 '21 at 06:57

Here is an exemple to change smoothly your background like a rainbow You could have the result you want to achive like this :

: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%}
}

If my answer solved your problem you can validate it; Otherwise a vote for the time is still appreciated :) — next, May 09 '21 at 06:59

CSS Switching between colors doesn't transition smoothly

3 Answers3