CSS animations stop working when <div> background is modified via JS

Question

I'm not sure what's happening. Whenever I use the slider to try and change the colors of the background gradients, the "background-size: 200% 200%" css rule in the .animated class disappears and the animation can't play anymore.

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

What can I do? I've tried moving that rule to every possible place I could think of but nothing worked in getting the animation to play again after the change in the slider. Can anyone help?

Answer 1

The css Rule background is a shorthand. which will also overwrite the background-size property when applied directly to the element.

You could use the background-image css rule to only change the colors, and not change the size, that's backgroundImage when setting through javascript.

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>

<!---->