I have put together a rotating border around a button on this CodePen, and while the concept seems promising, it's not functioning properly - the rendering performance is extremely slow and choppy (I'm using 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);
}
.curve-1 {
animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ 20s infinite linear;
transform-origin: 35px center;
}
.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);
}
// remaining keyframes omitted for brevity
<div class="button">button text</div>
// SVG code omitted for brevity
</svg>Can anyone shed light on CSS rendering issues and why this might be occurring?
I've also created another CodePen to demonstrate that animating a clip-path works fine there. You can check it out here.
.masked {
width: 500px;
clip-path: url(#mask)
}
.mask {
width: 500px;
}
.circle {
animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ 2s infinite;
}
@keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ {
// keyframe properties omitted for brevity
}<img src="image-url" class="masked"/>
// Additional HTML/SVG code omitted for brevity
</svg>If you have any insights into why these rendering issues are happening, I would greatly appreciate your input.
Thank you