CSS Transition动画引发CPU/GPU资源占用过高的问题咨询

我最近在网站上做一个小动画效果：让某个DOM元素随机改变宽度，实现代码如下：

HTML #

<div id="the-div"></div>

CSS #

#the-div {
  width: 100px;
  height: 50px;
  background-color: brown;
  transition: 0.3s all ease-in-out;
}

JavaScript #

const theDiv = document.getElementById("the-div");

function animate() {
  const value = Math.floor(Math.random() * 200);
  theDiv.style.width = value + "px";
  setTimeout(animate, 200);
}

animate();

原本想用CSS transition让尺寸变化更平滑，但实际测试后发现这个纯装饰性的动画居然占用了不少系统资源。我在Mac上用「活动监视器」观察Chrome的资源使用情况，对比了transition开启和关闭的状态，而且当添加更多div元素（模拟多个同类动画场景）时，资源占用的问题会变得更显著。

我现在有点纠结，想请教各位：

• 是不是我的实现方式哪里不对？
• 这类纯装饰性的动画是不是根本不适合用CSS transition来做？
• 还是说这种程度的资源占用属于正常现象，完全不用特意在意？

备注：内容来源于stack exchange，提问作者fguillen