为什么我的剪切路径比例动画模糊？

Question

我正在一个具有全屏加载屏幕的网站上工作，一旦加载了网站中的所有内容，中间的框（其中包含SVG clip-path）的尺寸将在故意抽动，直到填满整个屏幕。

但是，我试图弄清楚为什么动画时盒子看起来模糊。我尝试过使用所有GPU加速方法，包括transform: translateZ(0)，backface-visibility和perspective，但无济于事。

#loading {position:fixed; width:100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content:center; background: #34d1bf;}
#loading .bar {width: 169px; height: 160px; clip-path: url(#kframe); -webkit-clip-path: url(#kframe); background:#000; overflow: hidden; transform: translateZ(0); animation: loaded 2000ms linear forwards infinite;}

@keyframes loaded {
    0% {transform: scale(1);}
    1% {transform: scale(1);}
    
    32% {transform: scale(1);}
    33% {transform: scale(5);}
    
    65% {transform: scale(5);}
    66% {transform: scale(10);}
    
    99% {transform: scale(10);}
    100% {transform: scale(15);}
}

<div id="loading">
<div class="bar"></div>
</div>

<div style="height: 0; overflow: hidden;">
<svg width="0" height="0" viewBox="0 0 256 256">
<defs>
    <clipPath id="kframe" clipPathUnits="objectBoundingBox">
        <polygon transform="scale(0.00390 0.00390)" points="256,0 0,0 0,72 18,72 18,184 0,184 0,256 222.5,256 256,220 256,36 222.5,36 "/>
    </clipPath>
</defs>
</svg>
</div>

更新：这是一张图像的模糊最明显的照片，该图像在我计算机上的本地版本上进行了测试。经过测试，它在Chrome和Safari上的发生更多。

Answer 1

您的代码将裁剪div元素，然后对其进行缩放。

相反，反之亦然。缩放div，然后裁剪。一种实现div高度和宽度动画的方法。

#loading {
  position:fixed;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content:center;
  background: #34d1bf;
}

#loading .bar {
  width: 169px;
  height: 160px;
  clip-path: url(#kframe);
  -webkit-clip-path: url(#kframe);
  background:#000;
  overflow: hidden;
  transform: translateZ(0);
  animation: loaded 2000ms linear forwards infinite;
}

@keyframes loaded {
    0% {width: 169px; height: 160px;}
    1% {width: 169px; height: 160px;}
    
    32% {width: 169px; height: 160px;}
    33% {width: 845px; height: 800px;}
    
    65% {width: 845px; height: 800px;}
    66% {width: 1690px; height: 1600px;}
    
    99% {width: 1690px; height: 1600px;}
    100% {width: 2535px; height: 2400px;}
}

<div id="loading">
<div class="bar"></div>
</div>

<div style="height: 0; overflow: hidden;">
<svg width="0" height="0" viewBox="0 0 256 256">
<defs>
    <clipPath id="kframe" clipPathUnits="objectBoundingBox">
        <polygon transform="scale(0.00390 0.00390)" points="256,0 0,0 0,72 18,72 18,184 0,184 0,256 222.5,256 256,220 256,36 222.5,36 "/>
    </clipPath>
</defs>
</svg>
</div>