答案是使用animation结合@keyframes定义border-radius变化。通过设置关键帧控制圆角从0到50%或具体像素值，再将动画应用到元素，实现平滑过渡，如方块变圆形；可调整时间、缓动和循环次数，支持多角独立变化，适用于悬停或加载效果，注意单位选择与性能优化，添加will-change提升渲染效率。
要实现CSS动画中元素边框圆角的动态变化，核心方法是使用animation属性结合border-radius。通过定义关键帧（@keyframes），可以在动画过程中平滑地改变元素的圆角大小，从而实现从直角到圆形、或在不同圆角值之间切换的视觉效果。
定义关键帧控制border-radius变化
使用@keyframes规则设定动画的不同阶段中border-radius的值。例如，让一个方块从直角逐渐变为完全圆形：
@keyframes roundCorners {
0% {
border-radius: 0;
}
100% {
border-radius: 50%;
}
}
这个动画从0开始，到50%结束，适用于正方形元素变成圆形的情况。如果是矩形，也可以使用具体像素值如20px来控制圆角弧度。
将动画应用到目标元素
在需要动画的元素上添加animation属性，引用定义好的关键帧，并设置持续时间、缓动函数和播放次数等参数：
立即学习“前端免费学习笔记（深入）”；
.animated-box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: roundCorners 2s ease-in-out infinite;
}
这样，元素就会在2秒内不断循环执行圆角变化动画。你可以根据设计需求调整时间曲线（如ease、linear）或是否循环（infinite）。
实现复杂圆角过渡效果
你还可以对四个角分别设置不同的圆角值，创建更丰富的动画效果。比如模拟“呼吸”式变形：
@keyframes pulseRounded {
0% {
border-radius: 10px;
}
50% {
border-radius: 50%;
}
100% {
border-radius: 10px;
}
}
这种写法适合按钮悬停或加载提示场景，视觉上更有活力。注意：确保单位一致（百分比适用于等宽高元素，像素更灵活）。
基本上就这些。只要定义好关键帧并绑定动画，就能轻松实现border-radius的平滑过渡。不复杂但容易忽略的是兼容性和性能——现代浏览器都支持该用法，但如果动画频繁触发，建议加上will-change: border-radius;提升渲染效率。
