Firefox浏览器渐变旋转动画边框不流畅问题求助

方案1：用transform: rotate()替代自定义属性动画 #

Firefox对CSS transform的动画支持更高效（GPU加速），比动画自定义属性的流畅度更高。可以固定渐变角度，转而对伪元素应用旋转动画：

button {
  border-radius: 1rem;
  border: none;
  padding: 0.6em 1.2em;
  font-size: 3em;
  font-weight: 600;
  font-family: var(--font-firacode);
  background-color: #2C2C2C;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.90) inset;
  cursor: pointer;
  position: relative;
  overflow: hidden; /* 限制伪元素范围，避免溢出 */
}

button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.3rem;
  background: linear-gradient(
    90deg,
    var(--blue-color),
    var(--green-color),
    var(--yellow-color),
    var(--pink-color)
  );
  border-radius: inherit;
  animation: rotation 2s linear infinite;
  transform-origin: center;
  will-change: transform; /* 提示浏览器提前优化动画 */
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

关键优化点：

• 仅保留一个伪元素，减少渲染压力
• 用transform: rotate()替代自定义属性动画，触发GPU加速
• 改用linear动画曲线，降低Firefox的帧计算开销

方案2：优化自定义属性动画的渲染性能 #

若坚持使用自定义属性方案，可通过以下调整提升Firefox流畅度：

button {
  border-radius: 1rem;
  border: none;
  padding: 0.6em 1.2em;
  font-size: 3em;
  font-weight: 600;
  font-family: var(--font-firacode);
  background-color: #2C2C2C;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.90) inset;
  cursor: pointer;
  position: relative;
  will-change: contents;
}

button::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.3rem;
  background:linear-gradient(
    var(--gradient-angle),
    var(--blue-color),
    var(--green-color),
    var(--yellow-color),
    var(--pink-color));
  border-radius: inherit;
  animation: rotation 2s linear infinite;
  will-change: background;
  backface-visibility: hidden; /* 减少不必要的重绘 */
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

关键优化点：

• 移除冗余的::after伪元素
• 添加will-change和backface-visibility: hidden触发GPU加速
• 调整动画初始角度为0deg，让循环过渡更自然

额外建议 #

• 确保--blue-color等自定义颜色变量已正确定义，避免浏览器回退渲染导致的性能损耗
• 避免在循环动画中使用ease-in-out曲线，linear更适合持续循环的渐变动画

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