这个问题我之前也碰到过，本质是浏览器在非整数像素缩放时，对DOM元素的border-radius渲染精度不足导致的——尤其是小尺寸元素，当页面缩放比例让元素实际渲染宽高不是整数时，50%的圆角计算就会出现偏差，变成带棱角的圆角矩形。给你几个可行的解决方案：

方案1：用CSS Transform Scale替代宽高动画（推荐） #

放弃直接修改元素的width/height，改用transform: scale()来做缩放动画。Transform是在GPU层面处理的，渲染精度更高，而且页面缩放时，GPU会自动协调缩放比例，避免像素对齐问题。

示例代码：

<div class="circle"></div>

.circle {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
  transform-origin: center center; /* 确保缩放中心在元素中点 */
}

anime({
  targets: '.circle',
  scale: [1, 5], // 从原尺寸（4px）放大5倍到20px
  duration: 1000,
  loop: true,
  direction: 'alternate'
});

这种方式下元素的基础宽高始终是整数，动画只通过缩放变换实现，页面缩放时不会出现圆角变形的问题。

方案2：强制动画过程中宽高为整数像素 #

如果一定要保留修改width/height的动画逻辑，可以在动画的update回调里强制将宽高值取整，确保元素始终以整数像素尺寸渲染。

示例代码：

anime({
  targets: '.circle',
  width: [4, 20],
  height: [4, 20],
  duration: 1000,
  loop: true,
  direction: 'alternate',
  update: function(anim) {
    const circle = anim.animations[0].targets[0];
    // 取整避免非整数像素导致的渲染问题
    circle.style.width = `${Math.round(parseFloat(circle.style.width))}px`;
    circle.style.height = `${Math.round(parseFloat(circle.style.height))}px`;
  }
});

这个方案可能会让动画有轻微的跳帧感，但对于小尺寸元素来说几乎不可察觉，同时能解决页面缩放时的变形问题。

方案3：用SVG实现完美圆形（无需Transform定位） #

你担心SVG需要用Transform来定位其实是误解，SVG完全可以用常规的CSS布局方式（比如position、margin、Flexbox等）来定位，不需要依赖Transform。而且SVG是矢量图形，无论页面怎么缩放，圆形都能保持完美的形态。

示例代码：

<!-- 用容器定位SVG，不需要Transform -->
<div class="circle-container">
  <svg viewBox="0 0 4 4" width="4" height="4">
    <circle cx="2" cy="2" r="2" fill="#000" />
  </svg>
</div>

.circle-container {
  /* 这里用常规CSS定位，比如： */
  position: absolute;
  top: 20px;
  left: 20px;
}

// 直接动画SVG的width和height即可
anime({
  targets: 'svg',
  width: [4, 20],
  height: [4, 20],
  duration: 1000,
  loop: true,
  direction: 'alternate'
});

这种方案能从根源上解决像素渲染的问题，因为SVG的圆形是矢量路径，不会受页面缩放的影响。

内容的提问来源于stack exchange，提问作者Bradley