CSS动画渲染-惊人

Question

我已经为一个按钮周围的旋转边框创建了这 CodePen，虽然这个原理看起来很好，但它并不像它应该的那样工作--渲染看起来非常缓慢和惊人(我有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>

​

有人知道CSS呈现的任何知识吗?为什么会发生这种情况？

我还创建了这 CodePen，我只是想证明动画剪辑路径是可能的，在这里，它似乎工作得很好.

​

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

​

我不知道为什么会这样，如果有人知道答案，我会很高兴的。

谢谢

Answer 1

为什么这么复杂？使用stroke-dasharray技术可以实现相同的动画。

对我来说，动画看起来很流畅。这对你来说是否一样，很可能取决于硬件，但我离你的计算能力还很远。

​

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

​