css过渡不支持哪些属性_了解transition属性不支持的CSS属性

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 不会帮你猜意图，它只忠实地在两个确定数值之间补帧。