animate when changing an property from JavaScript css

Question

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

I just figured out that the linear-gradient don't animate. Your should go see [this](https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) question to resolve the problem — theskyblockman, Jun 04 '22 at 18:26

score 0 · Accepted Answer · answered Jun 04 '22 at 19:17

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)

animate when changing an property from JavaScript css

1 Answers1