CSS中transition: scale、transform、all的差异解惑

先明确核心前提：scale()、translate()都是transform属性的函数值，并非独立的CSS属性，过渡效果的生效依赖于监听正确的属性。

1. 完全无效的写法：transition: scale 0.2s ease-in #

input:focus + label, input:not(:placeholder-shown)  + label {
  transform: scale(0.8) translate(3px, -6px);
  transition: scale 0.2s ease-in;
}

这种写法没有任何过渡效果，原因是：transition只能监听独立存在的CSS属性（比如width、background-color、transform），而scale只是transform属性的一个函数参数，不是独立属性，浏览器无法识别这个过渡目标，自然不会触发动画。

2. 生效但同时过渡缩放与位移：transition: transform 0.2s ease-in #

input:focus + label, input:not(:placeholder-shown)  + label {
  transform: scale(0.8) translate(3px, -6px);
  transition: transform 0.2s ease-in;
}

这里监听的是整个transform属性，当元素从初始状态（比如默认的transform: none）切换到目标状态时，浏览器会计算transform属性前后值的整体差异——包括scale的缩放比例和translate的位移坐标，并将这两个变化打包成一个过渡动画，最终表现为缩放和位移同时以0.2s的ease-in曲线完成动画。

3. 全局过渡所有可变化属性：transition: all 0.2s ease-in #

这种写法会监听元素上所有可过渡的CSS属性的变化，和第二种写法的核心差异如下：

• 若元素在状态切换时，除了transform之外还有其他属性（比如color、padding、opacity）发生变化，这些属性都会一起参与过渡；
• 若只有transform属性变化，视觉效果看似和第二种写法一致，但性能上更差——浏览器需要遍历并监听所有属性的变化，会产生额外的性能开销；
• 你感知到的效果差异，大概率是因为元素在状态切换时还有隐藏的属性变化（比如浏览器默认的:focus样式、label的默认排版属性），all会把这些变化也纳入过渡，而第二种写法只过渡transform，所以动画表现不同。

内容的提问来源于stack exchange，提问作者backtosqaure1