如何让CSS中圆形的线性渐变旋转动画更流畅？

问题根源 #

你当前的实现是在关键帧里直接切换不同的linear-gradient定义，但background-image是无法被浏览器平滑过渡的离散属性，所以每到关键帧就会硬切换状态，自然出现跳变——animation-timing-function: linear对这种属性根本起不到平滑作用。

可行解决方案 #

换个思路：旋转承载渐变的元素，而非切换渐变本身，同时用内部元素遮罩保持圆形外观，这样旋转是连续的，完全不会有跳变：

修改后的完整代码 #

.circle-wrapper {
  position: absolute;
  margin-top: 28vh;
  margin-left: 35vh;
  width: 12vh;
  height: 12vh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 核心：匀速旋转动画 */
  animation: rotateGradient 2s linear infinite;
}

/* 用伪元素放渐变，避免内部圆形被旋转 */
.circle-wrapper::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
  border-radius: 50%;
  z-index: -1;
}

.circle-module {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: #fff; /* 换成你需要的底色，用来遮罩出渐变边框 */
  border-radius: 50%;
}

@keyframes rotateGradient {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

<div class="circle-wrapper">
  <div class="circle-module">&nbsp;</div>
</div>

方案说明 #

1. transform: rotate()是浏览器支持平滑过渡的属性，配合linear时间函数能实现匀速旋转，完全没有跳变。
2. 渐变放在容器的伪元素上，旋转容器时渐变跟着转，内部的.circle-module保持静止，通过底色遮罩出你原来想要的“渐变边框圆形”效果（和你用padding实现的逻辑一致）。
3. 内部元素尺寸减去原来的3px*2 padding，保证遮罩后圆形的大小和你之前的实现一致。

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