Почему мои анимации в масштабе клипа размыты?

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>