border-radius 动画必须用 transition 而非 @keyframes，因后者在旧版 Safari 和部分 Android WebView 中失效或卡顿；可靠方式是通过 hover、class 切换或 JS 控制状态触发 transition，且需显式声明 transition 属性、保持值类型与维度一致、避免混用单位，并注意渲染层干扰。
border-radius 动画必须用 transition 而不能用 animation 关键帧
直接写 @keyframes 对 border-radius 做动画，多数浏览器（尤其是旧版 Safari 和部分 Android WebView）会失效或卡顿。真正可靠的方式是靠 transition 触发状态切换——比如 hover、class 切换或 JS 控制的 class 变更。
- 只对可计算的数值生效：百分比、px、em 都可以，但
border-radius: 50%→border-radius: 0这类跨单位类型切换可能中断过渡 - 必须显式声明要过渡的属性：
transition: border-radius 0.3s ease;，不能只写transition: all（容易误触其他属性，且性能差） - 初始和目标值都得是合法的圆角语法，例如
border-radius: 4px 8px 12px 16px→border-radius: 0是 OK 的；但border-radius: 50%→border-radius: 4px 4px 0 0在某些 Chrome 版本里会跳变
多值 border-radius 过渡要保持维度一致
border-radius 支持 1~4 个值，浏览器按「顺时针上右下左」解析。过渡时若起始/结束的值个数不同（比如从 border-radius: 8px → border-radius: 4px 12px），部分浏览器会 fallback 到逐角插值，但行为不统一，容易出现意外形变。
- 安全做法：始终用 4 值写法，哪怕有些角相同，也显式写出：
border-radius: 8px 8px 8px 8px→border-radius: 0 0 12px 12px - 如果用百分比，确保容器尺寸稳定——
border-radius: 50%依赖宽高，若父容器在动画中缩放，圆角视觉效果会抖动 - 避免混用单位：
border-radius: 10px 50% 10px 50%→border-radius: 0会导致插值失败，Chrome 可能直接跳变
transition 不生效？检查这些硬性条件
常见“写了 transition 却没动画”的原因，往往不是 CSS 写错，而是触发机制或渲染链路被阻断。
- 元素必须有明确的初始
border-radius值（不能是border-radius: initial或未声明） - 过渡必须发生在「重绘触发点」：hover、:focus、JS 添加/删除 class 都行；但仅靠 JS 修改
style.borderRadius时，需确保两次赋值不在同一渲染帧（否则浏览器合并为一次，无过渡） - 父元素或自身设置了
transform: translateZ(0)或will-change: transform时，可能强制硬件加速，反而让border-radius过渡失效（尤其在 Safari）——此时去掉will-change或改用will-change: border-radius - 使用 Flex/Grid 布局时，若元素尺寸由内容撑开，而内容在动画中变化（如文字增减），可能导致圆角过渡被尺寸重排打断
兼容性与性能注意点
现代浏览器对 border-radius 过渡支持良好，但仍有细节差异：
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4+ 修复了多值百分比插值问题；Safari 14 及更早版本对
border-radius: 50% 0→border-radius: 0 50%会跳帧 - Android WebView（基于 Chromium 80-90）对非对称圆角过渡有轻微卡顿，建议加
backface-visibility: hidden优化 - 动画频繁触发（如 scroll 中监听并修改圆角）会导致 layout thrashing，应节流或改用
requestAnimationFrame
/* 推荐写法示例 */
.rounded-box {
border-radius: 8px;
transition: border-radius 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rounded-box.expanded {
border-radius: 0 0 16px 16px;
}圆角动画最脆弱的地方不在写法本身，而在它和布局、渲染层、设备特性的耦合。哪怕 CSS 看起来完全正确，也可能因为父容器 overflow、transform 层级、甚至系统字体加载时机而表现异常。动手前先确认目标环境的真实渲染行为，比套模板更重要。
