纯CSS无法真正改变元素几何形状，@keyframes仅能动画化可过渡属性；实际通过clip-path（推荐但需顶点数一致、注意Safari兼容）、border-radius与transform组合模拟，避免width/height触发重排。
用 @keyframes 改变形状的本质限制
纯 CSS 无法真正“改变元素的几何形状”（比如把矩形变成三角形），@keyframes 只能动画化可过渡的 CSS 属性。所谓“形状变化”，实际是通过 transform（缩放、旋转、倾斜）、clip-path 或 border-radius 等属性模拟视觉变形效果。
clip-path 是最接近“形状动画”的方案
它支持在关键帧中动画化多边形、椭圆、路径等裁剪区域，从而让元素呈现不同轮廓。但要注意浏览器兼容性与性能：
- Firefox 和 Chrome 107+ 支持
clip-path: polygon()的动画；Safari 目前不支持polygon()关键帧动画（仅支持inset()或简单circle()） - 避免在大量元素上同时运行动画，
clip-path动画会触发重绘，可能掉帧 - 必须为起始和结束
clip-path提供相同顶点数，否则动画会跳变或失效
@keyframes toTriangle {
from {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
to {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
}
.element {
animation: toTriangle 2s ease-in-out forwards;
}
border-radius 和 transform 的组合更稳妥
当需要兼容 Safari 或旧版 Chrome，用 border-radius 圆角 + transform: scaleX()/skewX() 拉伸/倾斜，能低成本模拟“膨胀”“压扁”“菱形化”等效果：
-
border-radius支持动画，但不能从0直接到50%再到0做“脉动”而不卡顿——建议用ease-in-out缓动 -
transform: skewX(30deg)配合border-radius: 20px可模拟平行四边形带圆角的效果 - 不要混用
transform和clip-path动画，层叠顺序和渲染行为难以预测
@keyframes squashStretch {
0% {
border-radius: 10px;
transform: scaleY(1) scaleX(1);
}
50% {
border-radius: 25px;
transform: scaleY(0.7) scaleX(1.3);
}
100% {
border-radius: 10px;
transform: scaleY(1) scaleX(1);
}
}
为什么 width/height 动画不是好选择
直接改 width 和 height 虽然能“拉伸”元素，但它会触发浏览器布局（layout），性能远低于 transform 或 clip-path。尤其在滚动中或高频率动画里，容易卡顿甚至丢帧。
立即学习“前端免费学习笔记（深入）”；
- 如果目标是“矩形→圆形”，优先用
border-radius: 50%动画，而非width: 100px → height: 100px -
绝对定位 +
top/left动画也触发 layout，同理应避免 - 想实现“折叠/展开”，用
max-height+overflow: hidden是 hack，但比改height稍好；真正推荐用transform: scaleY()+origin控制锚点
CSS 形状动画的边界很清晰：它不生成新几何体，只操纵已有盒模型的视觉呈现。真正难的不是写对 keyframes，而是判断哪个属性组合能在目标浏览器里既平滑又符合设计意图——尤其是 clip-path 的顶点对齐和 Safari 的静默降级，最容易在线上突然失效。