当通过JS修改<div>背景时，CSS动画停止工作

Question

我不确定发生了什么。每当我使用滑块尝试更改背景渐变的颜色时，.animated类中的“background-size：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是shorthand。当直接应用于元素时，它也会覆盖background-size属性。

您可以使用background-image css规则仅在通过javascript设置时更改颜色，而不是更改backgroundImage的尺寸。

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

.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%;
  }
}

＆＃13;

<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>

<!---->

＆＃13;

＆＃13;

＆＃13;