优先选 transform: scale() 而非 width/height 动画，因其在合成层完成、不触发重排重绘，性能更优；缩放中心由 transform-origin 控制，默认居中，支持多值缩放与镜像；CSS 动画需用 forwards 保持终态，JS 推荐通过 CSS 自定义属性或 class 切换控制。
用 transform: scale() 配合 @keyframes 最直接，别用 width/height 动画——性能差、触发重排、缩放中心难控。
为什么优先选 transform: scale() 而不是改尺寸属性
缩放本质是坐标变换，transform 在合成层完成，不触发布局（layout）和绘制（paint），只走复合（composite）阶段；而动画 width、height 或 font-size 会强制浏览器反复计算盒模型，卡顿明显，尤其在中低端设备上。
-
scale(1.5)表示整体放大至 1.5 倍，基于元素自身的 transform-origin（默认是50% 50%，即中心点） - 若要以左上角为基点缩放，加一句
transform-origin: 0 0; - 避免同时动画
transform和left/top——可能引发层叠上下文异常或渲染错位
@keyframes 缩放动画写法与常见参数组合
定义关键帧时，scale() 支持单值（等比缩放）、双值（scale(x, y)，如水平拉伸+垂直压缩），也支持负值（镜像翻转）。
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0.6;
}
to {
transform: scale(1.2);
opacity: 1;
}
}
.element {
animation: zoomIn 0.3s ease-out forwards;
}
-
forwards确保动画停在to状态，否则缩放会弹回原大小 - 想循环播放？加
infinite；想先反向再正向？用alternate - 慎用
ease-in-out做快速缩放——起止处速度过慢，易显拖沓；ease-out或cubic-bezier(0.2, 0.8, 0.4, 1)更干脆
JavaScript 控制缩放动画的两种安全方式
纯 CSS 动画无法动态传参，但可通过 class 切换或 CSS 自定义属性（CSS Custom Properties）配合 JS 实时驱动。
立即学习“前端免费学习笔记（深入）”；
- 推荐方式：用
element.style.setProperty('--scale-value', '1.3')更新自定义属性，CSS 中写transform: scale(var(--scale-value)); - 简单切换：JS 添加/移除 class，如
el.classList.add('zoom-active')，对应 CSS 定义.zoom-active { animation: zoomPulse 0.4s ease; } - 避免直接操作
el.style.transform = 'scale(1.5)'后再动画——内联样式优先级高，会覆盖 CSS 动画的transform声明
缩放动画真正难的不是写法，而是 origin 控制、与其他 transform（如 rotate、translate）的叠加顺序、以及在 flex/grid 容器中因尺寸未定导致的初始缩放错位——这些地方容易一动就偏，得动手调几次才稳。
