Как избежать длинного «Пересчитать стиль» при наличии большого количества анимированных элементов на странице в сочетании с requestAnimationFrame

Question

У меня система частиц, созданная с помощью CSS-анимации, подобной этой: https://jsfiddle.net/sirceljm/u46pLa37/3/ window.requestAnimationFrame(raf);

Производительность, это хорошо работает:

но когда я включаю requestAniamtionFrame: https://jsfiddle.net/sirceljm/u46pLa37/ window.requestAnimationFrame(raf);

«Пересчет стилей» становится активным в каждом кадре, который ухудшает производительность:

Чем больше частиц, тем дольше процесс «Пересчет стилей» занимает каждый кадр.

Есть ли способ заставить CSS-анимацию вести себя так, как в первом примере, но все еще использовать requestAnimationFrame в вашем приложении.

Я также пробовал, который не запускает процесс "Пересчет стилей". Но это не вариант в моем приложении.