直接对 width 和 height 做 transition 可行，但需始终满足 width === height 且 border-radius: 50% 同时参与过渡，避免 transform 缩放、媒体查询触发失效及 overflow 裁剪问题。
直接对 width 和 height 做 transition 是可行的，但必须配 border-radius: 50%
圆形元素本质是宽高等值 + 完全圆角。只要保证变化过程中始终满足 width === height 且 border-radius: 50%，缩放动画就能视觉上保持正圆。关键不是“怎么画圆”，而是“怎么让尺寸变化不跳变”。
- 必须显式设置
width和height（不能只靠padding或内容撑开） -
border-radius: 50%要写在同一个 CSS 规则里，并参与 transition（即不能被更具体的规则覆盖或重置） - 避免使用
transform: scale()单独做缩放——它不会触发布局重排，但会模糊边缘、影响子元素定位，且和尺寸过渡混用容易冲突
transition 属性要同时包含 width、height 和 border-radius
虽然 border-radius 在 50% → 50% 之间没实际变化，但某些浏览器（尤其是旧版 Safari）在尺寸突变时会短暂丢失圆角，显式过渡能强制渲染管线保持一致性。
circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #3a86ff;
transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
}
circle:hover {
width: 80px;
height: 80px;
}
用 min-width/max-width 或媒体查询触发变化时，transition 会失效
CSS 过渡只响应“可动画属性”的直接变更（如 class 切换、伪类、内联 style 修改）。如果靠媒体查询或容器查询改变尺寸，transition 不会自动生效——浏览器认为这是布局重排，不是样式插值。
- 解决方案：改用 JavaScript 监听尺寸变化，手动添加 class 触发动画
- 或者把响应式逻辑移到 JS 层，用
element.style.width动态赋值（确保触发 transition） - 绝对不要依赖
@media (min-width: 768px) { .circle { width: 60px; } }期望它平滑过渡——它不会
父容器 overflow: hidden 可能裁剪动画过程中的临时非圆状态
当 width 和 height 过渡不同步（比如因 JS 异步修改、CSS 优先级冲突），元素可能短暂变成椭圆，此时若父容器有 overflow: hidden，就会切掉边缘，出现闪烁或错位。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 的 computed 样式，确认
width和height在每一帧都严格相等 - 过渡时间尽量统一（不要一个 0.2s 一个 0.3s）
- 真要保险，加一句
will-change: width, height;提前提醒浏览器优化渲染路径
