Переопределите «animation-fill-mode: forwards», добавив класс

Question

Почему мы не можем переопределить «анимацию вперед»? Я добавил простой пример. Невозможно переопределить, даже используя !important.

// click and add the blue class
document.querySelector(".box").addEventListener("click", e => {
  e.target.classList.add("blue");
  console.log("blue class added");
})

.box {
  width: 80px;
  height: 80px;
  background: pink;
  animation: change-color .3s linear forwards;
}

@keyframes change-color {
  to {
    background: green;
  }
}

.blue {
  background: blue !important;
}

<div class="box"></div>

Answer 1

Это можно исправить разными способами.

Если вы можете настроить анимацию, вы можете рассмотреть CSS переменных:

// click and add the blue class
document.querySelector(".box").addEventListener("click", e => {
  e.target.classList.add("blue");
  console.log("blue class added");
})

.box {
  width: 80px;
  height: 80px;
  background: pink;
  animation: change-color .3s linear forwards;
}

@keyframes change-color {
  to {
    background: var(--c,green);
  }
}

.blue {
  --c: blue;
}

<div class="box"></div>

Или делайте это иначе, когда вам не нужно использовать форвардов

// click and add the blue class
document.querySelector(".box").addEventListener("click", e => {
  e.target.classList.add("blue");
  console.log("blue class added");
})

.box {
  width: 80px;
  height: 80px;
  background: green;
  animation: change-color .3s linear;
}

@keyframes change-color {
  from {
    background: pink;
  }
}

.blue {
  background: blue;
}

<div class="box"></div>

Если вы не можете настроить анимацию, вы можете попробовать добавить еще один слой сверху (используя box-shadow, псевдоэлемент и т. Д. * 1042). *)

// click and add the blue class
document.querySelector(".box").addEventListener("click", e => {
  e.target.classList.add("blue");
  console.log("blue class added");
})

.box {
  width: 80px;
  height: 80px;
  background: pink;
  animation: change-color .3s linear forwards;
}

@keyframes change-color {
  to {
    background: green;
  }
}

.blue {
  box-shadow:0 0 0 500px inset blue;
}

<div class="box"></div>

---

Вы также можете только анимировать цвет фона и добавить синюю окраску с градиентом:

// click and add the blue class
document.querySelector(".box").addEventListener("click", e => {
  e.target.classList.add("blue");
  console.log("blue class added");
})

.box {
  width: 80px;
  height: 80px;
  background-color: pink;
  animation: change-color .3s linear forwards;
}

@keyframes change-color {
  to {
    background-color: green;
  }
}

.blue {
  background-image:linear-gradient(blue,blue);
}

<div class="box"></div>