I have created this CodePen for a rotating border around a button and although the principle seems to be good, it is not working as it should - the rendering seems extremely slow and staggering (I have the M1 MacBook Pro).

.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;
  }
}

<div >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" />
      <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" />
      <rect fill="#000" height="35" >
    </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" />
  <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" />
  <rect fill="#000" height="35" >
 </svg>

Does anybody know anything about CSS rendering and why could this be happening?

I also created this CodePen where I just wanted to demonstrate that animating a clip-path is possible and it seems to work just fine here...

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

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

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

I have no idea why this's happening, if anyone knows the answer, I would be glad.

Thanks

CodePudding user response：

Why so complicated? The same animation can be achieved with the stroke-dasharray technique.

For me, the animation appears smooth. Whether it is the same for you depends probably on hardware, but I am far down from your computing power.

.button {
  width: 206px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  position: relative;
  border: 3px solid transparent;
}
.button .line {
  position: absolute;
  overflow: visible;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: black;
  stroke-width: 3px;
  stroke-dasharray: 10px 90px;
  animation: around 20s linear infinite;
}
  
@keyframes around {
    0% {
      stroke-dashoffset: 100px;
    }
    100% {
      stroke-dashoffset: 0px;
    }
}

<div >button text<svg  view-box="0 0 206 70">
  <path d="M35,-1.5 A 36.5 36.5 0 0 0 35,71.5 H 171 A 36.5 36.5 0 0 0 171,-1.5 Z" pathLength="100" />
</svg>