圆角动画回退突兀的本质是border-radius过渡未被正确触发或中断，需用@keyframes配合animation-direction: reverse和animation-fill-mode: forwards实现可控双向动画，统一单位、禁用auto/inherit，并推荐element.animate() API精确控制。
圆角动画回退突兀，本质是 border-radius 的过渡未被正确触发或中断了动画流程。单纯用 transition 切换 class 很容易在移除类时跳回原始值（尤其当起始/结束状态 border-radius 单位不一致、或存在 inherit/auto 值时）。用 @keyframes 配合 animation 能更好控制全程，但若没处理好“回退”逻辑（比如直接取消动画或切换 animation-name），依然会卡顿或跳变。
确保动画全程受控：用 animation-direction + animation-fill-mode
避免手动移除 class 导致样式瞬间重置。改用一个统一的动画，通过 JS 控制播放方向和状态：
- 定义双向 keyframes：从圆角 → 直角 和 直角 → 圆角 都在同一套帧中完成
- 用
animation-direction: reverse实现“回退”，而非删 class 或换动画名 - 必须设
animation-fill-mode: forwards，保证动画停在最后一帧，不闪回初始值
统一单位与数值，禁用 auto / inherit
border-radius 动画不支持 auto、inherit 或混合单位（如 50% 0 → 0 0 中百分比和像素混用）。务必显式写出两端值：
- ✅ 推荐写法：
border-radius: 12px;↔border-radius: 0; - ✅ 多值统一：
border-radius: 12px 12px 0 0;↔border-radius: 0 0 0 0; - ❌ 避免：
border-radius: 50%;→0（百分比无法插值到长度） - ❌ 避免：
border-radius: inherit;或未声明值（依赖浏览器默认）
用 JS 精确控制动画状态（推荐）
给元素绑定点击/悬停等事件，用 element.animate() API 替代纯 CSS class 切换，实现真正可中断、可反向的平滑过渡：
立即学习“前端免费学习笔记（深入）”；
- 调用
animate()时传入{ direction: 'normal', duration: 300 }启动圆角 - 再次触发时检查是否已有动画实例，有则调用
reverse()方法，自动倒播 - 无需 class 切换，无样式闪回风险，且支持 cancel/resume
备选：CSS 自定义属性 + transition（轻量场景）
如果不想用 JS，可用 CSS 变量解耦 radius 值，再靠 transition 平滑响应变量变化：
- HTML：
<div class="card" style="--radius: 0"> - CSS：
.card { border-radius: var(--radius); transition: border-radius 0.3s ease; } - JS 改值：
el.style.setProperty('--radius', '12px'); - 关键：变量值必须始终是合法长度单位（px/%/rem），不能是关键字
不复杂但容易忽略：动画平滑与否，不在“有没有 keyframes”，而在于整个生命周期是否可控、数值是否可插值、中间态是否被保留。选对机制比堆属性更重要。
