如何让conic-gradient动画实现如box1般的平滑效果？

问题 #

我希望conic-gradient的动画能像左侧盒子（box1）一样平滑。我为两个盒子设置了几乎相同的动画配置，区别仅在于box1使用transform:rotate()属性实现动画，而box2使用conic-gradient实现，但box2无法达到box1那样的平滑过渡效果，请问该如何解决？

代码示例 #

CSS 代码

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;

}
.box1, .box2{
  border: 2px solid red;
  width: 200px;
  height: 200px;
  align-self: center;
  border-radius: 50%;
  background-image: conic-gradient(black 0deg, black 10deg, white 0deg);
}
@keyframes box1{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.box1{
  margin-right: 10px;
  animation-name: box1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes box2{
  0% {background-image: conic-gradient(black 0deg, black 10deg, white 0deg);}
  100% {background-image: conic-gradient(black 0deg, black 300deg, white 0deg);}
}

.box2{
  margin-left: 10px;
  animation-name: box2;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation</title>
</head>
<body>
   <div class="box1">
   </div>
   <div class="box2">

   </div>
</body>
</html>

解决方案 #

问题根源 #

CSS 无法直接对background-image这类复合属性做平滑过渡——浏览器只能在关键帧的两个渐变值之间生硬切换，没法像transform那样进行连续的数值插值计算，这就是box2动画卡顿的核心原因。

修复方案 #

改用CSS变量控制锥形渐变的角度，再给变量添加动画，就能实现和box1一样的平滑效果：

修改后的 CSS 代码

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;
}
.box1, .box2{
  border: 2px solid red;
  width: 200px;
  height: 200px;
  align-self: center;
  border-radius: 50%;
}
/* box1 保留原有逻辑 */
@keyframes box1{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
.box1{
  margin-right: 10px;
  background-image: conic-gradient(black 0deg, black 10deg, white 0deg);
  animation: box1 3s linear infinite;
}
/* box2 用CSS变量控制渐变角度 */
.box2{
  margin-left: 10px;
  --angle: 10deg;
  background-image: conic-gradient(black 0deg, black var(--angle), white 0deg);
  animation: box2 3s linear infinite;
}
@keyframes box2{
  0% { --angle: 10deg; }
  100% { --angle: 370deg; } /* 用10deg+360deg，保证循环衔接无跳变 */
}
/* 兼容旧浏览器的变量动画声明（可选） */
@supports (background: paint(something)) {
  @property --angle {
    syntax: '<angle>';
    initial-value: 10deg;
    inherits: false;
  }
}

关键说明 #

1. 用--angle变量替代硬编码的渐变角度，让CSS可以对变量值进行平滑插值计算
2. 动画目标从替换background-image改为修改变量值，实现连续过渡
3. 结束值设为370deg而非300deg，确保动画循环时不会出现突兀跳变
4. 可选的@property声明是为了兼容Chrome 85以下不支持原生变量动画的旧浏览器

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