应使用 transform: scale() 配合 transition 或 @keyframes 实现平滑等比缩放，避免 width/height——后者触发重排、导致卡顿、失真、可访问性问题；scale() 仅重绘、gpu 加速、边缘锐利。
直接用 transform: scale() 配合 transition 或 @keyframes 就能实现平滑缩放动画，别碰 width/height——那会触发重排、变形、卡顿，而且不是真等比缩放。
为什么不能用 width/height 做缩放动画
浏览器对 width 和 height 的修改必须重新计算整个布局（reflow），尤其当元素带 border-radius、box-shadow 或子元素依赖尺寸时，动画过程会出现撕裂、模糊、错位。文字行高、内边距比例也会全乱。而 scale() 只触发重绘（repaint），走 GPU 加速路径，边缘锐利、性能高、真正等比。
-
width: 50%是盒模型压缩，不是缩放；font-size+width更糟：文字缩放不均匀，line-height不同步，可访问性直接崩 - 哪怕只是加个圆角，
width/height缩放后圆角会塌陷或拉伸失真 - 移动端手势缩放（双指）会被
width/height动画干扰，甚至拦截
transition 实现 hover 缩放的三个关键点
常见“写了没反应”，往往卡在下面这三点：
-
transition必须作用于整个transform属性，写成transition: scale 0.3s是无效的——得写transition: transform 0.3s ease - 缩放中心默认是左上角，按钮或图标会“往右下偏移”，看起来像滑动而不是缩放；必须显式加
transform-origin: center - 父容器若设了
overflow: hidden，缩放后超出部分会被裁剪；临时改成visible测试，或调小缩放比、改transform-origin避免溢出
示例（按钮悬停放大）：
.btn {
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
transform-origin: center;
}
.btn:hover {
transform: scale(1.1);
}
JS 动态控制 scale 时怎么避免覆盖已有变换
直接写 el.style.transform = 'scale(1.3)' 会干掉之前 CSS 里写的 rotate() 或 translate()；用 += 拼接又容易格式错乱、重复叠加。
- 稳妥做法是维护一个状态对象，每次完整生成字符串：
el.style.transform = `translate(${x}px) rotate(${r}deg) scale(${s})` - 如果只是开关式缩放（比如点击展开），用 class 切换最干净：
el.classList.toggle('is-zoomed')，CSS 里定义.is-zoomed { transform: scale(1.4); } - 不要依赖
getComputedStyle读取再拼接——慢、不可靠，且在首次渲染前可能读不到值
animation 实现循环脉冲缩放要注意节奏和原点
脉冲动画不是越猛越好，重点是「先快放、后慢收」的弹性感。缺了 transform-origin 或缓动曲线，就会像呼吸灯一样僵硬跳变。
- 起始和结束帧必须都是
scale(1)，否则循环时有跳变 - 推荐幅度控制在
scale(1.05)～scale(1.1)；小图标超过1.2显得突兀 - 时长建议
0.3s～0.5s，配合ease-out或cubic-bezier(0.2, 0.8, 0.3, 1)才有“弹出感”
示例（干净脉冲）：
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.icon {
animation: pulse 0.4s ease-out infinite;
transform-origin: center;
}
Canvas、SVG、Three.js 场景下，对外层 DOM 元素做 scale() 是自欺欺人：Canvas 像素拉伸模糊，SVG 渲染错位，Three.js 光照和阴影全部偏移。这些必须进到绘图层或模型层去改缩放参数，比如 ctx.scale() 或 model.scale.set()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
