如何用clip-path实现页面wrapper左上到右下过渡动画？解决卡顿问题

我在柯尼赛格官网看到了一个动画，点击右上角按钮可触发。尝试用@keyframes实现此过渡动画时出现卡顿，代码如下：

原代码 #

CSS #

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(18, 16, 16, 0.8);
  z-index: 1;
  animation: 1s flush ease;
}

@keyframes flush {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  20% {
    clip-path: polygon(68% 0, 100% 0, 100% 100%, 0 100%, 0 28%);
  }
  40% {
    clip-path: polygon(100% 27%, 100% 34%, 100% 100%, 0 100%, 0 56%);
  }
  60% {
    clip-path: polygon(100% 63%, 100% 78%, 100% 100%, 0 100%, 18% 100%);
  }
  80% {
    clip-path: polygon(100% 84%, 100% 97%, 100% 100%, 0 100%, 52% 100%);
  }
  100% {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
  }
}

HTML #

<body>
  <div class="wrapper"></div>
</body>

优化方案 #

1. 用will-change提升性能 #

clip-path动画会频繁触发浏览器重绘，添加will-change属性可以提示浏览器提前分配资源优化动画：

.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(18, 16, 16, 0.8);
  z-index: 1;
  animation: 1s flush ease;
  will-change: clip-path; /* 添加此行 */
}

2. 改用SVG实现（更稳定的性能） #

SVG的裁剪动画由专门的引擎处理，性能优于CSS clip-path，示例代码：

<body>
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <defs>
      <clipPath id="clip">
        <polygon points="0 0, 100 0, 100 100, 0 100, 0 0">
          <animate
            attributeName="points"
            dur="1s"
            values="
              0 0, 100 0, 100 100, 0 100, 0 0;
              68 0, 100 0, 100 100, 0 100, 0 28;
              100 27, 100 34, 100 100, 0 100, 0 56;
              100 63, 100 78, 100 100, 0 100, 18 100;
              100 84, 100 97, 100 100, 0 100, 52 100;
              100 100, 100 100, 100 100, 100 100, 100 100;
            "
            fill="freeze"
            easing="ease"
          />
        </polygon>
      </clipPath>
    </defs>
    <rect width="100%" height="100%" fill="rgba(18, 16, 16, 0.8)" clip-path="url(#clip)" />
  </svg>
</body>

3. 优化关键帧路径 #

调整关键帧中多边形的点坐标，让相邻帧之间的路径变化更平滑，避免突变的坐标值，减少浏览器的计算压力。

内容的提问来源于stack exchange，提问作者PiusYiu