如何用CSS实现从中心扩展再转为描边的圆形动画

原方案的核心问题是父元素的transform会传递给伪元素，导致伪元素的缩放是基于父元素缩放后的尺寸，无法独立实现中心缩放；同时两个动画同时执行，不符合“先实心、再变描边”的顺序需求。下面提供几种优化方案：

方案一：单元素多阶段关键帧动画 #

用单个元素，分阶段控制背景和边框，实现顺序动画：

@keyframes circleToStroke {
  /* 第一阶段：实心圆从中心放大至100% */
  0% {
    transform: scale(0);
    background: black;
    border-width: 0;
  }
  50% {
    transform: scale(1);
    background: black;
    border-width: 0;
  }
  /* 第二阶段：实心转描边，中间露出底色 */
  100% {
    transform: scale(1);
    background: white;
    border-width: 10px;
    border-color: black;
  }
}

.circle {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  border-radius: 50%;
  border-style: solid;
  animation: circleToStroke 2s ease-in-out forwards;
}

• 0-50%：元素从中心缩放至完整尺寸，保持实心黑色；
• 50%-100%：固定尺寸，将背景改为白色（与页面底色一致），同时显示黑色边框，形成描边效果。

方案二：独立伪元素动画（推荐） #

让父元素仅做容器，用两个伪元素分别实现实心圆和中间挖空的动画，完全避免父元素transform的影响：

/* 实心圆缩放动画 */
@keyframes fillScale {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* 中间挖空部分缩放动画 */
@keyframes hollowScale {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.circle {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
}

/* 负责实心圆的伪元素 */
.circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: black;
  animation: fillScale 1s ease-in forwards;
}

/* 负责中间挖空的伪元素 */
.circle::after {
  content: "";
  position: absolute;
  inset: 10px; /* 控制描边宽度 */
  border-radius: inherit;
  background: white;
  animation: hollowScale 1s ease-in forwards;
  animation-delay: 1s; /* 等实心圆动画完成后执行 */
  transform-origin: center;
}

• 两个伪元素独立执行动画，父元素无transform操作，彻底解决动画叠加问题；
• 通过animation-delay严格控制顺序，先显示实心圆，再从中心放大白色区域形成描边；
• 描边宽度直接调整inset值即可，灵活度高。

方案三：CSS Mask实现平滑过渡 #

如果需要更细腻的“实心转描边”渐变效果，可以用CSS遮罩：

@keyframes maskTransition {
  0% {
    transform: scale(0);
    mask-size: 0% 0%;
  }
  50% {
    transform: scale(1);
    mask-size: 0% 0%;
  }
  100% {
    transform: scale(1);
    mask-size: 80% 80%; /* 挖空区域大小 */
  }
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: black;
  mask: radial-gradient(circle, transparent 50%, black 50%);
  mask-position: center;
  mask-repeat: no-repeat;
  animation: maskTransition 2s ease-in-out forwards;
}

原理是通过径向渐变遮罩，从中心向外扩展透明区域，实现实心到描边的平滑过渡。

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