Use transform instead of height and y to improve performance

[anhdd-kuro]

For those that are using height and y for animation, for ex bars-scale.svg, it can cause the browser to repaint, which is not good for performance.
The same animation effect can be achieved using the transform property instead.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    .spinner_jCIR {
      animation: spinner_B8Vq .9s linear infinite;
      animation-delay: -.9s;
      transform-origin: center;
      animation-timing-function: cubic-bezier(0.36, .61, .3, .98);
    }

    .spinner_upm8 {
      animation-delay: -.8s
    }

    .spinner_2eL5 {
      animation-delay: -.7s
    }

    .spinner_Rp9l {
      animation-delay: -.6s
    }

    .spinner_dy3W {
      animation-delay: -.5s
    }

    @keyframes spinner_B8Vq {

      0%,
      66.66% {
        transform: scaleY(1);
      }

      33.33% {
        transform: scaleY(1.8);
      }
    }
  </style>
  <rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12" />
  <rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12" />
</svg>