transition的动画时间由transition-duration属性设置，可在transition简写中直接指定，单位支持秒（s）和毫秒（ms），可为不同属性用逗号分隔设置不同时间，推荐使用简写形式定义过渡效果。

在 CSS 中，transition 的动画时间是通过 transition-duration 属性来设置的。它定义了过渡效果从开始到结束所花费的时间。

基本语法

你可以直接在 transition 简写属性中指定时间，也可以单独使用 transition-duration。

/* 单独设置持续时间 */
transition-duration: 0.5s;
<p>/<em> 或者在 transition 简写中设置 </em>/
transition: width 0.5s ease;</p>

单位说明

时间单位支持秒（s）和毫秒（ms）：

• 0.3s 表示 300 毫秒
• 500ms 等同于 0.5s

多个属性不同持续时间

如果需要为不同属性设置不同的动画时间，可以用逗号分隔：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

transition-property: width, opacity;
transition-duration: 1s, 0.3s;

这表示 width 过渡持续 1 秒，opacity 只用 0.3 秒。

常用写法（推荐）

通常使用简写形式更清晰：

/* 属性 过渡时间 缓动函数 延迟 */
transition: background-color 0.3s ease-in-out 0.1s;
<p>/<em> 所有可过渡属性都应用相同过渡 </em>/
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);</p>

基本上就这些。只要设置好 transition-duration 或在 transition 里指定时间，就能控制动画快慢了。不复杂但容易忽略细节，比如单位写错或漏掉属性名。