Изменение цвета градиента анимированного фона

Question

У меня есть анимированный градиентный фон, и я хочу переопределить исходный цвет, применяя другой класс.Когда я применяю этот новый класс, анимация останавливается.

См. Код ниже и попробуйте добавить класс oc к div для воспроизведения.

.background {
    background: linear-gradient(
        to right,
        #eee9e5 20%,
        red 50%,
        #eee9e5 80%
    );
    background-size: 400% 400%;
    height: 16px;
    margin: 16px 0;
}

.oc {
  background: linear-gradient(
        to right,
        #eee9e5 20%,
        blue 50%,
        #eee9e5 80%
    ) !important;
}

.animated {
    animation: move 4s ease-in infinite;
}

@keyframes move {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

<div class="background animated" />

Вы также можете увидеть код на https://codepen.io/Taskim/pen/KegLmJ.

Знаете ли вы какой-нибудь способ обойти это?

Answer 1

Проблема заключается в использовании !important в правиле background.

background - это сокращенное свойство, которое изменяет все свойства background-*.

Поэтому, когда вы устанавливаете background: linear-gradient(...)!important, вы также переопределяете background-position и устанавливаете для него значения по умолчанию, которые нельзя анимировать, поскольку они более важны.

Используйте background-image: linear-gradient(...), и это должно работать.

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('.animated').classList.toggle('oc');
})

.background {
  background: linear-gradient( to right, #eee9e5 20%, red 50%, #eee9e5 80%);
  background-size: 400% 400%;
  height: 16px;
  margin: 16px 0;
}

.oc {
  background-image: linear-gradient( to right, #eee9e5 20%, blue 50%, #eee9e5 80%);
}

.animated {
  animation: move 4s ease-in infinite;
}

@keyframes move {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<div class="background animated"></div>
<button>toggle gradient</button>

---

Также имейте в виду, что вы не можете самостоятельно закрывать div (, если это не настоящий html, а некоторыешаблон из рамок )