CSS设置transition:translateX() 2s时动画跳变失效是什么原因

根本原因 #

.move样式里写的transition:translateX() 2s是完全不符合CSS语法规范的无效值，这是动画异常的核心诱因：

• transition属性的第一个参数只能传两种值：要么是具体的CSS属性名（比如transform、opacity），要么是关键字all/none。translateX()本身是transform属性值里调用的位移函数，从来不是独立的CSS属性，浏览器解析到这个值的时候，根本识别不出来你想给哪个属性加过渡，默认会把整条transition规则判定为无效。
• 改成transition:all 2s之后动画恢复正常，是因为all是transition的合法关键字，意思是监听元素所有支持过渡的属性变化，当hover触发transform的属性值改变时，浏览器自然会按照设定的2秒时长执行平滑过渡。

卡顿跳变现象的来源 #

你看到的卡顿、跳帧不是浏览器bug，是浏览器对错误CSS的容错机制导致的：
浏览器遇到写废的CSS规则不会直接让整个页面样式崩掉，会尝试做模糊匹配解析。部分浏览器内核会把你写错的translateX()勉强匹配到transform属性上，但因为规则本身是错的，没法生成连贯的过渡动画帧，就会出现卡顿、跳着走的异常表现；还有部分内核会直接忽略这条错误规则，元素会直接瞬间跳到hover的最终位置，完全没有过渡效果。

推荐修复方式 #

不建议用transition:all 2s的写法，这种写法会监听元素所有属性的变化，哪怕是你不需要过渡的属性变动也会触发过渡逻辑，平白增加性能开销。直接指定要过渡的目标属性即可：

.move
{
  margin:2rem;
  width:150px;
  height:50px;
  padding:10px;
  background-color:darkred;
  text-align:center;
  color:white;
  border-radius:0.5rem;
  font-size:20px;
  /* 正确写法：指定对transform属性做2秒过渡 */
  transition: transform 2s;
}

改完之后动画效果和写all完全一致，性能更好。

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