主页>技术知识>详情

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

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

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

【问题描述】

尝试写了一个小动画,效果是通过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 位)

具体原因还是不明


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


收到~,我再想一下其他思路
本文用户投稿或网站收集转载,如有侵权请联系本站。