Chrome浏览器中，animation动画调整元素的border时的抖动问题，原因是什么，怎么处理？

Chrome浏览器中，animation动画调整元素的border时的抖动问题，原因是什么，怎么处理？简介:【问题描述】 尝试写了一个小动画，效果是通过animation来实现从中心的圆有一个渐变散发的效果，思路是通过动画控制圆的border来实现，但是最终结果呈现的时候，在Chrome浏览器产生了我理解

【问题描述】

尝试写了一个小动画，效果是通过animation来实现从中心的圆有一个渐变散发的效果，思路是通过动画控制圆的border来实现，但是最终结果呈现的时候，在Chrome浏览器产生了我理解不了的抖动的问题，我排查之后只能暂定这个现象是border变化的时候，Chrome浏览器是先调整了上下的border，然后再调整左右的border，导致了会有不断地抖动出现，以下是Chrome下的效果：（很明显的抖动）

但是在火狐下面是正常的，如下：

所以，有没有大佬能帮忙解释一下啊~

【已尝试方案】

1、backface-visibility：hidden;  （不管用）

2、transform-origin: center center;（不管用）

3、display：block；（不管用）

【代码】

< html > < style >      .box  {          width :  100% ;          height :  200px ;          background-color :  dimgrey ;     }        .title  {          display :  inline-block ;          width :  100% ;          height :  30px ;          text-align :  center ;          font-size :  18px ;          color :  white ;          border :  1px   solid   white ;          background-color :  teal ;     }        .content  {          width :  100% ;          height :  170px ;          text-align :  center ;          display :  flex ;          justify-content :  center ;          align-items :  center ;     }        .circular-box  {          width :  120px ;          height :  120px ;          border-radius :  50% ;          margin :  0   5px ;          display :  flex ;          justify-content :  center ;          align-items :  center ;     }        .circular  {          width :  35px ;          height :  35px ;          background-color :  lightsalmon ;          border-radius :  50% ;          animation : circleBoxGo  2s   ease   infinite ;          -webkit-animation : circleBoxGo  2s   ease   infinite ;          -moz-animation : circleBoxGo  2s   ease   infinite ;     }        @keyframes   circleBoxGo  {         0% {              border :  0px   solid   yellowgreen ;         }           10% {              width :  40px ;              height :  40px ;         }           20% {              width :  35px ;              height :  35px ;         }           100% {              border :  40px   solid   dimgrey ;         }       }        .delay100  {          animation-delay :  100ms ;     }        .delay200  {          animation-delay :  300ms ;     }        .delay300  {          animation-delay :  500ms ;     }        .delay400  {          animation-delay :  700ms ;     }        .delay500  {          animation-delay :  900ms ;     } </ style >   < body >        < div   class = "box" >          < span   class = "title" > 交错动画 </ span >          < div   class = "content" >              < div   class = "circular-box" >                  < div   class = "circular delay100" >                  </ div >              </ div >              < div   class = "circular-box" >                  < div   class = "circular delay200" >                  </ div >              </ div >              < div   class = "circular-box" >                  < div   class = "circular delay300" >                  </ div >              </ div >              < div   class = "circular-box" >                  < div   class = "circular delay400" >                  </ div >              </ div >              < div   class = "circular-box" >                  < div   class = "circular delay500" >                  </ div >              </ div >          </ div >      </ div >   </ body >   </ html >
解决方法：

我录屏的这个chrome版本信息如下：
版本 75.0.3770.90（正式版本） （64 位）

换另外一台机器的chrome就没问题，版本信息：

版本 93.0.4577.82（正式版本） （64 位）

具体原因还是不明

计算、渲染跟不上，要换思路实现相同效果

收到~，我再想一下其他思路