如何将transform、transition相关CSS属性合并为单行写法？

完全可以实现和你原有代码完全一致的效果，相关说明如下：

• 首先明确：transform和过渡相关属性是两类独立的CSS属性，没法合并成单条属性声明，但可以通过属性简写+物理行合并的方式写成单行。
• 你原代码里只设置了transition-delay和transition-duration，没有指定过渡作用的属性、缓动函数，这两个值会自动应用浏览器默认规则：过渡属性默认值为all（所有支持过渡的属性变化都会触发动画），缓动函数默认值为ease。
• 过渡类拆分属性可以用transition简写属性替代，注意简写规则里过渡时长要写在延迟前面，顺序写反会导致效果异常。

如果要和你原代码效果100%匹配（即所有属性变化都应用该过渡规则），合并后的物理单行写法如下：

transform: translateX(25px); transition: all 0.25s 0.05s;

如果你实际只需要给transform属性加过渡（性能更好，也能避免其他属性意外触发过渡，是日常开发更推荐的写法），可以把简写里的all替换成transform，写法如下：

transform: translateX(25px); transition: transform 0.25s 0.05s;

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