How to optimize css animation?

Question

css

Hello toasters!
There is a mouse parallax animation on 15-20 svg elements, the code is below. The problem is that the animation sometimes freezes a little, how can I avoid this?
JS code:

move($event) {
      const mouseX = $event.pageX,
        mouseY = $event.pageY,
        w = this.particlesBgWidth / 2 - mouseX,
        h = this.particlesBgHeight / 2 - mouseY,
        l = document.querySelectorAll(".layer"); // поиск элементов, их около 20

      if (this.particlesBgWidth > 900) {  // проверка ширины экрана, чтобы на экранах < 900 px параллакса не было
        for (var i = 0; i < l.length; i++) {
          let t = i !== 0 ? i : 1; // чтобы в вычислениях ниже i не было равно 0
          l[i].style.transform = `translate3d(${w / (t * -6.2)}px, ${h /
            (t * 4.5)}px, 0) rotate(${l[i].dataset.deg}deg)`; // чтобы для каждого элемента был свой трансформ, исходя из порядка
        }
      }
    },

Styles:

.layer {
    position: absolute;
    transition: transform ease 0.2s;
    will-change: transform;
  }

I looked at the redrawing of layers in devtools, but it seems that the layers are not redrawn, it seems to me that the matter is in calculations in JS, but I'm not sure

Answer 1

first take out l = document.querySelectorAll(".layer"); // search for elements, there are about 20 of them,
why are you looking for elements every time?