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

梦天1261 发布于 09/18 11:22
阅读 138
收藏 0

解锁HarmonyOS核心技能,赢取限量周边好礼>>>

【问题描述】

尝试写了一个小动画,效果是通过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 >
加载中
0
梦天1261
梦天1261

我录屏的这个chrome版本信息如下:
版本 75.0.3770.90(正式版本) (64 位)

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

版本 93.0.4577.82(正式版本) (64 位)

具体原因还是不明

0
120011676
120011676

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

梦天1261
梦天1261
收到~,我再想一下其他思路
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部