<!DOCTYPE html>
<html>
<head>
  <title>Benchmark - CSS Blending and CSS Animation</title>
  <style>
    #backdrop {
      float: left;
      width: 400px;
      height: 400px;
      isolation: isolate;
      background-image: linear-gradient(to bottom,
          rgba(255, 255, 0, 0.9),
          rgba(255, 0, 0, 0.9),
          rgba(0, 255, 0, 0.9),
          rgba(0, 0, 255, 0.9),
          rgba(0, 0, 0, 0.9));
      position: absolute;
      top: 50px;
      left: 100px;
    }
    #backdrop div {
      width: 5%;
      height: 5%;
      background-color: rgba(200, 100, 100, 0.7);
      float: left;
      will-change: transform;
      mix-blend-mode: hue;
      animation: rotate 3s infinite linear;
    }
    @keyframes rotate {
      to {transform: rotateZ(360deg);}
    }
  </style>
  <script>
    window.onload = function() {
      for (var i = 0; i < 400; i++) {
        backdrop.appendChild(document.createElement("div"));
      }
    };
  </script>
</head>
<body>
  <div id="backdrop"></div>
</body>
</html>