CSS animation rendering - staggering - css

Question

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 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>
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%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>
I have no idea why this's happening, if anyone knows the answer, I would be glad.
Thanks

Answer 1

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 class="button">button text<svg class="line" 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>