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，而是来自框架的某些模板）

更改动画背景的渐变颜色

1 个答案: