CSS动画渲染卡顿求助：按钮旋转边框动画运行异常

我制作了一个实现按钮旋转边框效果的示例，原理看似可行，但在M1 MacBook Pro设备上运行时渲染极慢且卡顿。

卡顿示例代码 #

CSS代码

.button {
  width: 206px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  position: relative;
}
.button::after {
    content: "";
    border-radius: 35px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    clip-path: url(#mask);
    border: 3px solid black;
  }

.curve-1 {
  animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ 20s infinite linear;
  transform-origin: 35px center;
  //animation-play-state: paused;
  //transform: rotate(-315deg)
}
.curve-2 {
  animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ 20s infinite linear;
  transform-origin: 35px center;
  translate: 136px 0;
}
.line {
  animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ 20s infinite linear;
}

svg {
  display: block;
}

@keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ {
  0% {
    transform: rotate(45deg);
  }
  22% {
    transform: rotate(-135deg);
  }
  27% {
    transform: rotate(-180deg);
  }
  88% {
    transform: rotate(-180deg);
  }
  89% {
    transform: rotate(-225deg);
  }
  100% {
    transform: rotate(-315deg);
  }
}

@keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(0deg)
  }
  39% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  72% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}



@keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ {
  0%, 100% {
    width: 0;
    x: 35px;
    y: 35px;
  }
  11% {
    width: 0;
    x: 35px;
    y: 35px;
  }
  22% {
    width: 55px;
    x: 35px;
    y: 35px;
  }
  39% {
    width: 55px;
    x: 116px;
    y: 35px;
  }
  50% {
    width: 0;
    x: 171px;
    y: 35px;
  }
  61% {
    width: 0;
    x: 171px;
    y: 0;
  }
  72% {
    width: 55px;
    x: 116px;
    y: 0;
  }
  89% {
    width: 55px;
    x: 35px;
    y: 0;
  }
  100% {
    width: 0;
    x: 35px;
    y: 0;
  }
}

HTML代码

<div class="button">button text</div>

<svg view-box="0 0 206 70" width="206" height="70">
  <defs>
    <clipPath id="mask">
      <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-1"/>
      <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-2"/>
      <rect fill="#000" height="35" class="line">
    </clipPath>
  </defs>
</svg>
  

<svg view-box="0 0 206 70" width="206" height="70">
  <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-1"/>
  <path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-2"/>
  <rect fill="#000" height="35" class="line">
 </svg>

有人了解CSS渲染机制吗？请问出现此问题的原因是什么？

我还制作了另一个验证clip-path动画可行性的示例，该示例运行完全正常：

正常运行的clip-path验证示例代码 #

CSS代码

.masked {
  width: 500px;
  clip-path: url(#mask)
}
.mask {
  width: 500px;
}
.circle {
  animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ 2s infinite;
}

@keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ {
  0% {
    translate: 0;
  }
  50% {
    translate: 40px;
  }
  100% {
    translate: 100px;
  }
}

HTML代码

<img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dHJlZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60" class="masked"/>
<svg viewport="0 0 100 60">
  <circle cx="50" cy="30" r="20" class="circle">
    </svg>
<svg width="0" height="0">
  <defs>
    <clipPath id="mask">
      <circle cx="100" cy="100" r="40" class="circle" />
    </clipPath>
  </defs>
</svg>

我完全不清楚问题所在，若有人知晓答案，我将不胜感激。谢谢。

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