每个转换属性的不同转换持续时间答案

【问题标题】：Different transition-duration for each transition-property每个转换属性的不同转换持续时间
【发布时间】：2014-05-21 16:19:57
【问题描述】：

我想为每个过渡属性使用不同的持续时间。例如，对于宽度，我希望过渡为 0.3s，高度为 0.6s。

在 CSS3 中可以吗？

【问题讨论】：

【解决方案1】：

transition: width 0.3s, height 0.6s;

只需使用简写 transition 属性即可。不要忘记供应商前缀。

【讨论】：

【解决方案2】：

当然，您可以使用逗号分隔的列表列出不同的转换：transition: color 0.25s ease, border 1s linear

【讨论】：

谢谢！是否可以在过渡中将transform: translateX(..) 与transform: rotate(..) 分开？
不幸的是，transform 被视为一个捆绑属性。可能的工作是将您要转换的任何内容包装在几个包装器中，每个包装器用于您需要以不同方式转换的每个属性。或者，使用 javascript 来触发具有各自转换和转换的类。