CSS动画停止在< div>背景通过JS修改

Question

我不确定发生了什么。每当我使用滑块尝试更改背景梯度的颜色时，"背景大小：200％200％" CSS规则在。动画类中消失，动画不再播放了。

https://codepen.io/pedrangelo/pen/yajgro

.gradient{
     background: linear-gradient(92deg, #21d538, #0ad787), linear-gradient(92deg, #f1f1f1, #0ad787);
}
.animated {
     background-size: 200% 200%;
     animation: Animation 2s ease infinite;
}
@keyframes Animation { 
     0%{background-position:43% 0%, 11% 0%}
     50%{background-position:58% 100%, 90% 100%}
     100%{background-position:43% 0%, 11% 0%}
}

我该怎么办？我已经尝试将该规则移至我能想到的每个可能的地方，但是在滑块变更后，没有什么可以使动画再次播放的方法。谁能帮忙？

Answer 1

CSS规则background是速记。当直接应用于元素时，它也将覆盖background-size属性。

您可以使用background-image CSS规则仅更改颜色，而不是更改大小，即通过JavaScript设置backgroundImage。

function changeBackground() {
  var r1 = parseInt(document.getElementById("red1").value, 10),
    g1 = parseInt(document.getElementById("green1").value, 10),
    b1 = parseInt(document.getElementById("blue1").value, 10);
  var gradients = document.getElementsByClassName("gradient");
  for (var i = 0; i < gradients.length; i++) {
    gradients[i].style.backgroundImage = "linear-gradient(92deg, " + rgbToHex(r1, g1, b1) + ", #033333), linear-gradient(92deg, #333333, #111111)";
  }
  function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }
  function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
  }
}

.box {
  width: 350px;
  height: 200px;
  background: #f1f1f1;
  border-radius: 8px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
}
.box p {
  font-family: arial;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: white;
}
.gradient {
  background: linear-gradient(92deg, #21d538, #0ad787), linear-gradient(92deg, #f1f1f1, #0ad787);
}
.animated {
  background-size: 200% 200%;
  transform: translateZ(1px);
  animation: Animation 2s ease infinite;
}
@keyframes Animation {
  0% {
    background-position: 43% 0%, 11% 0%;
  }
  50% {
    background-position: 58% 100%, 90% 100%;
  }
  100% {
    background-position: 43% 0%, 11% 0%;
  }
}

<div class="box gradient animated" style="background-blend-mode:normal;">
  <p>Normal</p>
</div>
<div class="box gradient animated" style="background-blend-mode:multiply;">
  <p>Multiply</p>
</div>
<div class="box gradient animated" style="background-blend-mode:screen;">
  <p>Screen</p>
</div>
<div class="box gradient animated" style="background-blend-mode:overlay;">
  <p>Overlay</p>
</div>
<div class="box gradient animated" style="background-blend-mode:darken;">
  <p>Darken</p>
</div>
<div class="box gradient animated" style="background-blend-mode:color-dodge;">
  <p>Color-Dodge</p>
</div>
<div class="box gradient animated" style="background-blend-mode:saturation;">
  <p>Saturation</p>
</div>
<div class="box gradient animated" style="background-blend-mode:color;">
  <p>Color</p>
</div>
<div class="box gradient animated" style="background-blend-mode:luminosity;">
  <p>Luminosity</p>
</div>
<!---->
<div data-role="content" class="box">
  <div data-role="fieldcontain" data-controltype="slider">
    <label for="red1" color="red1">
            Red 1
        </label>
    <input id="red1" type="range" value="22" min="0" max="255" data-highlight="true" data-mini="true" onchange="changeBackground()" />
  </div>
  <div data-role="fieldcontain" data-controltype="slider" class="greenSlider1">
    <label for="green1">
            Green 1
        </label>
    <input id="green1" type="range" name="greenSlider1" value="255" min="0" max="255" data-highlight="true" data-mini="true" onchange="changeBackground()" />
  </div>
  <div data-role="fieldcontain" data-controltype="slider" class="blueSlider1">
    <label for="blue1">
            Blue 1
        </label>
    <input id="blue1" type="range" name="blueSlider1" value="255" min="0" max="255" data-highlight="true" data-mini="true" onchange="changeBackground()" />
  </div>
</div>
<!---->