如何仅为transform: translateX()应用CSS过渡效果？

在Chrome浏览器中可以通过CSS独立变换属性实现需求，该特性已被Chrome原生支持，无需前缀。

核心思路是放弃使用复合的transform属性，改用单独的translate和rotate属性分别控制位移与旋转，然后仅为translate设置过渡效果，rotate属性不添加过渡就会瞬间生效。

修改后的代码如下：

CSS代码 #

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  height: 50px;
  width: 200px;
  background: rgb(255, 99, 99);
  /* 初始状态：位移为0，旋转角度为0 */
  translate: 0;
  rotate: 0deg;
  /* 仅为translate属性设置过渡 */
  transition: translate 2s;
}
div:hover{
  /* hover时分别设置目标位移和旋转角度 */
  translate: 100px 0;
  rotate: 45deg;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hover on me.</div>
</body>
</html>

测试效果：鼠标悬停时，元素会平滑过渡到X轴位移100px的位置，同时旋转45度会瞬间完成；鼠标移出时，位移会平滑恢复初始状态，旋转也会瞬间归零。

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