If I try this code I just wrote:
function changeBackgroundColor() { const clickingDiv = document.getElementById("test"); clickingDiv.style.setProperty("--primary-color-new", "#3474A7"); clickingDiv.style.setProperty("--secondary-color-new", "#ffd340"); clickingDiv.style.animation = "change-background 1s"; clickingDiv.classList.add("change-bg"); setTimeout(() => { clickingDiv.style.setProperty("--primary-color", "#3474A7"); clickingDiv.style.setProperty("--secondary-color", "#ffd340"); clickingDiv.style.animation = ""; clickingDiv.classList.remove("change-bg"); }, 1000); }
@keyframes change-background { from { background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); } to { background: linear-gradient(to right, var(--primary-color-new), var(--secondary-color-new)); } } #test { width: 500px; height: 500px; } .change-bg { animation-name: change-background; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: both; animation-timing-function: ease; }
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;"> <button onclick="changeBackgroundColor()">click me</button> </div>
the animation don’t work and it directly switch from the first color to the other. (Normally I retrieve the color from an API)
I would want to do a transition between the 2 values
Advertisement
Answer
I found out that linear-gradient transition / animation doesn’t work. To fix this error I just used a wrapper with the opacity like this so here’s the modified code:
function changeBackgroundColor() { const wrapper = document.getElementById("wrapper"); const element = document.getElementById("test"); if (!wrapper.classList.contains("wrapper-moving")) { wrapper.classList.add("wrapper-moving"); wrapper.style.setProperty("--new-primary-color", "#2568f6"); wrapper.style.setProperty("--new-secondary-color", "#804cda"); setTimeout(() => { element.style.setProperty("--primary-color", "#2568f6"); element.style.setProperty("--secondary-color", "#804cda"); wrapper.classList.remove("wrapper-moving"); }, 1000); } }
#test { width: 500px; height: 500px; background: linear-gradient(to right, #3474A7, #ffd340); z-index: 1; } .wrapper { z-index:-1; height: 600px; width: 600px; position: absolute; transition: all 1s; background: linear-gradient(to right, var(--new-primary-color), var(--new-secondary-color)); } .wrapper:not(.wrapper.wrapper-moving) { opacity: 0; } .wrapper.wrapper-moving { opacity: 1; }
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;"> <div id="wrapper" class="wrapper"></div> <button onclick="changeBackgroundColor()">click me</button> </div>
(I couldn’t get it to work properly in my case but it is the answer)