Si pruebo este código, acabo de escribir:
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>la animación no funciona y cambia directamente del primer color al otro. (Normalmente recupero el color de una API)
Me gustaría hacer una transición entre los 2 valores.
Descubrí que la transición/animación de gradiente lineal no funciona. Para corregir este error, solo usé un contenedor con la opacidad como esta , así que aquí está el código modificado:
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>(No pude hacer que funcionara correctamente en mi caso, pero es la respuesta)