border-radius动画不顺畅主因是渲染机制与触发方式不当，应使用合法数值单位、优先transition、避免all过渡、合理启用will-change或transform伪元素遮罩，并排查filter等干扰样式。
边框圆角（border-radius）动画不顺畅，通常不是因为属性本身不支持动画，而是受浏览器渲染机制、动画触发方式或 CSS 书写细节影响。用 @keyframes 或 transition 单独实现都可能卡顿，关键在于“如何触发”和“是否启用硬件加速”。
确保使用可动画的属性和合法值
border-radius 本身是可动画属性（CSS Transitions Level 1 明确支持），但必须用数值单位（如 px、rem、%），不能混用不同单位或非法值（比如 border-radius: 5px / 10px 这类双值语法在部分旧版浏览器中动画支持不稳定）。
- ✅ 推荐写法：
border-radius: 8px、border-radius: 50%、border-radius: 12px 4px 8px 2px - ❌ 避免写法：
border-radius: 10px / 5px（椭圆语法）、border-radius: max(4px, 1em)（函数表达式，不可动画）
优先用 transition 而非 keyframes 实现简单圆角变化
对 hover、focus 等状态切换，transition 更轻量、更易控制，且浏览器优化更好；@keyframes 更适合复杂循环或多阶段节奏，但若只做“从直角到圆角”，反而增加不必要的重绘开销。
- 给元素加
transition: border-radius 0.3s ease，并在 :hover 中改border-radius - 避免同时过渡太多属性（如
transition: all 0.3s），会强制触发 layout 或 paint，拖慢性能 - 可加
will-change: border-radius提前提示浏览器该属性将变化（仅在必要时，勿滥用）
用 transform 搭配伪元素模拟“圆角动画”（兼容性 & 性能更强）
如果原生 border-radius 动画仍有卡顿（尤其在低端设备或大量元素时），可绕过它：用一个绝对定位的伪元素（::before）覆盖四角，通过 transform: scale() 动画“缩放遮罩”，视觉上呈现圆角渐变效果——这个方案全程走 GPU 合成，几乎不触发重排重绘。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
overflow: hidden，伪元素设border-radius并初始scale(0) - hover 时伪元素
scale(1)，配合transition: transform 0.3s cubic-bezier(...) - 适用于按钮、卡片等需要“动态软化边缘”的场景，视觉效果一致，性能更稳
检查是否被其他样式拖累
看似是圆角的问题，实际常由外部因素导致：比如父容器有 filter（如 drop-shadow）、opacity 小于 1、或开启了 backface-visibility: hidden 但未配 transform: translateZ(0)，这些都会干扰图层合成，让 border-radius 动画掉帧。
- 临时移除
filter、opacity、box-shadow等，测试是否恢复流畅 - 若必须保留阴影，可用
transform: translateZ(0)强制新建合成图层 - Chrome DevTools → Rendering 面板勾选 “Paint flashing” 和 “FPS meter”，直观查看重绘区域和帧率
