css animation与border-radius圆角变化
使用CSS动画可实现border-radius平滑变化，通过@keyframes定义从0或小值到50%的圆角过渡，配合animation-timing-function控制缓动，适用于按钮悬停、加载动画等场景。
在使用 CSS Animation 时，如果希望元素的 border-radius 发生平滑变化（比如从方形变为圆形），可以直接通过 @keyframes 来定义圆角的变化过程。现代浏览器对 border-radius 的动画支持良好，只要属性值是可计算的（例如从 0 到 50%），就能实现流畅过渡。
如何实现 border-radius 动画
要让圆角在动画中变化，只需在关键帧中设置不同的 border-radius 值。
- 起始状态设置较小或为 0 的圆角
- 结束状态设置较大的圆角（如 50% 实现圆形）
- 配合
animation-timing-function控制缓动效果
示例代码：
常见应用场景
这种动画常用于按钮悬停、加载图标变形、卡片交互反馈等视觉增强场景。
- 悬停时从直角变圆角：
hover触发动画或配合transition - 无限循环动画营造呼吸感
- 与
transform联动，实现更丰富的形变效果
用 transition 实现鼠标交互示例：
注意事项
虽然 border-radius 支持动画，但有一些细节需要注意以保证兼容性和性能。
- 尽量使用百分比或相同单位进行插值计算，避免混合单位（如 px 和 %）导致不可预测结果
- 当元素宽高不相等时，
50%不一定生成完美圆形，只是椭圆角 - 某些旧版浏览器可能不完全支持
border-radius的动画插值 - 复杂边框动画可能触发重绘，建议结合
will-change或transform提升性能
基本上就这些。只要数值可插值，CSS 就能平滑地动画化圆角变化，搭配简单的 keyframes 或 transition 即可实现自然的视觉过渡效果。不复杂但容易忽略细节。
