如何在同一页面实现三个独立的@keyframes fill动画适配不同角度圆形表盘

解决方案 #

该需求完全可以实现，你当前写法的问题在于重复定义了同名@keyframes规则和相同的类选择器，后续定义的规则会覆盖前者，导致三个表盘的动画冲突无法独立运行，可通过以下两种方案实现：

方案1：定义独立的动画关键帧 #

给三个表盘的.fill元素分别添加独立类名（如fill-1/fill-2/fill-3），分别定义不同的动画规则即可：

/* 公共基础样式 */
.circle-wrap .circle .fill {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
}

/* 第一个表盘 */
.circle-wrap .circle .fill-1 {
  animation-name: fill-1;
  transform: rotate(45deg);
}
@keyframes fill-1  {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

/* 第二个表盘 */
.circle-wrap .circle .fill-2 {
  animation-name: fill-2;
  transform: rotate(65deg);
}
@keyframes fill-2  {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(65deg); }
}

/* 第三个表盘 */
.circle-wrap .circle .fill-3 {
  animation-name: fill-3;
  transform: rotate(95deg);
}
@keyframes fill-3  {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(95deg); }
}

方案2：使用CSS变量简化代码 #

仅定义一个通用关键帧，通过CSS自定义属性传递不同的结束角度，代码更精简易维护：

/* 通用动画关键帧 */
@keyframes fill {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(var(--end-angle, 45deg)); }
}

/* 公共样式，forwards参数可让动画结束后保持在最终角度，避免回弹 */
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s forwards;
}

/* 分别为不同表盘设置结束角度变量 */
.circle-wrap .circle .fill:nth-of-type(1) {
  --end-angle: 45deg;
}
.circle-wrap .circle .fill:nth-of-type(2) {
  --end-angle: 65deg;
}
.circle-wrap .circle .fill:nth-of-type(3) {
  --end-angle: 95deg;
}

如果你的表盘不是同级元素，也可以给每个表盘外层加独立类名来指定变量，该写法兼容性覆盖所有现代浏览器。

内容的提问来源于stack exchange，提问作者John K Bell