实现圆形元素阴影与宽高的平滑扩展动画（含过度扩展效果）

嘿，我懂你想要的那种带点弹性的动画——圆形先稍微“冲”一下过度扩展，再平滑落到目标状态对吧！你说现在动画不够流畅，大概率是因为没给动画加精准的阶段控制，或者属性动画的配合没做好，咱们来调整一下～

核心思路 #

要实现这种两段式动画，咱们需要用CSS @keyframes 把动画拆成两个阶段：

1. 过度扩展阶段：让宽高、阴影先超过目标值一点
2. 平滑归位阶段：从过度状态慢慢过渡到最终的目标样式

同时，给动画配上合适的缓动函数，避免生硬的线性变化，还要保证所有属性的动画同步，不会出现错位。

基础解决方案（直接动画宽高+阴影） #

先看修改后的完整代码，我保留了你原来的基础样式，只加了关键的动画部分：

<div class="circle"></div>

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* 用50%比固定75px更灵活，适配不同宽高 */
  background: #74E2BF;
  position: absolute;
  top: 50px;
  left: 150px;
  box-shadow: 0 0 0 25px rgba(116, 226, 191, 0.3); /* 给阴影加个半透明，效果更自然 */
  /* 绑定动画：名称、时长、缓动、停在最终状态 */
  animation: circleExpand 2s ease-in-out forwards;
}

/* 定义两段式动画 */
@keyframes circleExpand {
  0% {
    width: 150px;
    height: 150px;
    box-shadow: 0 0 0 25px rgba(116, 226, 191, 0.3);
  }
  /* 30%的位置达到过度扩展的峰值，你可以调整这个百分比和数值来控制弹性强弱 */
  30% {
    width: 165px;
    height: 165px;
    box-shadow: 0 0 0 35px rgba(116, 226, 191, 0.3);
  }
  100% {
    width: 150px;
    height: 150px;
    box-shadow: 0 0 0 25px rgba(116, 226, 191, 0.3);
  }
}

关键优化点： #

• 分阶段关键帧：用30%的节点设置过度扩展的状态，让动画有“弹性”感，而不是直接从A到B
• 缓动函数：ease-in-out让动画开头加速、结尾减速，比默认的ease更贴合这种先冲再收的效果
• 阴影优化：给阴影加半透明，视觉上更柔和，避免和背景太突兀

进阶流畅版（用transform: scale代替宽高动画） #

如果你追求极致流畅（尤其是移动端），建议用transform: scale()代替直接修改width/height——因为transform是GPU加速的，不会触发页面重排重绘，动画会更丝滑：

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #74E2BF;
  position: absolute;
  top: 50px;
  left: 150px;
  box-shadow: 0 0 0 25px rgba(116, 226, 191, 0.3);
  animation: circleScaleExpand 2s ease-in-out forwards;
}

@keyframes circleScaleExpand {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 25px rgba(116, 226, 191, 0.3);
  }
  30% {
    transform: scale(1.1); /* 放大1.1倍，对应原来的165px */
    box-shadow: 0 0 0 35px rgba(116, 226, 191, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 25px rgba(116, 226, 191, 0.3);
  }
}

为什么这个更流畅？ #

直接修改width/height会让浏览器重新计算元素布局（重排），而transform只是在GPU层面做视觉缩放，不会影响布局，动画帧率更高，尤其是在低性能设备上差异明显。

调试小技巧 #

如果还是觉得不够流畅，可以试试：

• 调整过度扩展的幅度（比如把scale(1.1)改成scale(1.05)，阴影从35px改成30px），让弹性更细腻
• 调整动画时长（比如从2s改成1.5s），适配不同的场景需求
• 给box-shadow的颜色也加过渡，比如在过度阶段让阴影更亮一点，增强视觉层次感

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