CSS中display、visibility、position、z-index、background-image、content、cursor等属性根本不能加transition，因其无中间值；height/width设为auto、margin/padding为auto、font-family等也因无法插值而失效。
哪些 CSS 属性根本不能加 transition
transition 不是“所有属性都能动”，它只认「可插值的数值型属性」——也就是浏览器能算出中间状态的那些。像 display、visibility、position 这类，浏览器压根不提供中间值，写了也白写。
常见完全不支持的属性包括：
-
display（none↔block是离散切换，无过渡） -
visibility（hidden↔visible也不插值，只会突显/突隐） -
position（本身只是定位模式，不是位置；static/relative之间切，没中间态） -
z-index（整数跳变，浏览器不计算 1→2 之间的“1.5”） -
background-image（两张图之间无法渐变混合） -
content（伪元素里换文字？不行） -
cursor（光标样式切换不可动画）
看似能动、实则容易失效的“高危属性”
有些属性虽然技术上支持 transition，但实际用错就会跳变或卡顿：
-
height或width设为auto：浏览器无法计算起始/结束像素值，直接跳变 -
margin/padding从auto变化：同理，auto不是数值，无法插值 -
font-family：字体切换不可动画（连浏览器都不尝试过渡） -
filter中部分值（如blur(0)→blur(5px)可动，但none→blur(5px)在旧版 Safari 可能不触发）
正确做法是：确保起止值都是明确数字（比如 height: 0 → height: 48px），或改用更稳妥的替代方案。
立即学习“前端免费学习笔记（深入）”；
为什么 transform 和 opacity 是首选
这两个属性不仅支持 transition，而且被浏览器优化进合成层（compositor layer），动画不触发布局（layout）和绘制（paint），只走合成（composite）——性能好、不卡顿、兼容稳。
-
transform（如translateX()、scale()、rotate()）能平滑位移缩放旋转 -
opacity控制透明度，配合visibility+step-end可模拟“先淡入再可交互”
示例：
.btn { opacity: 0.7; transform: translateY(0); transition: opacity 0.2s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:hover { opacity: 1; transform: translateY(-2px); }JS 动态修改时最容易漏掉的关键点
用 JS 切换类名或改 style 时，常出现“第一次没动画”的问题，原因往往是：
- 没在初始样式中声明
transition（必须写在常态规则里，不能只写在:hover或.active里） - 直接赋值
element.style.top = '20px'，但父容器没设position: relative，导致偏移无效，动画自然不发生 - 用 JS 改完样式后立刻读取
offsetHeight等触发重排，但忘了先让浏览器“看到初始态”——有时需加void element.offsetHeight强制同步
真正需要过渡的，从来不是“怎么写”，而是“写在哪”和“值是否可算”。transition 不会帮你猜意图，它只忠实地在两个确定数值之间补帧。
