过渡效果的持续时间由transition-duration属性设置，单位为秒（s）或毫秒（ms），默认值为0s；可单独使用如transition-duration: 0.3s，或在transition简写中指定第二个值，如transition: width 0.4s ease；支持多个属性不同时间，通过逗号分隔，如transition-duration: 0.5s, 0.2s。

在css中，过渡效果的持续时间通过 transition-duration 属性来设置，它定义了属性变化所花费的时间。这个时间决定了动画从开始到结束的快慢。

基本语法

transition-duration 的值可以使用秒（s）或毫秒（ms）单位。常见写法如下：

• 1s：表示持续1秒
• 0.5s 或 500ms：表示半秒
• 0.2s：表示200毫秒，常用于快速反馈效果

默认值是 0s，意味着没有过渡，属性立即变化。

单独设置持续时间

如果你只想设置持续时间，可以这样写：

transition-duration: 0.3s;

这会让元素在状态改变时，用0.3秒完成过渡。

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

与 transition 一起使用

更常见的做法是使用简写属性 transition，它可以同时设置属性名、持续时间、延迟和缓动函数：

美间AI

美间AI：让设计更简单

45

查看详情

• transition: width 0.4s ease;
• transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

其中第二个值就是 duration，比如上面的 0.4s 和 0.6s。

多个属性不同持续时间

如果想让不同属性有不同的过渡时间，可以用逗号分隔：

transition-Property: width, opacity;
transition-duration: 0.5s, 0.2s;

这样 width 变化用0.5秒，opacity 只用0.2秒。

基本上就这些。只要指定好时间单位，就能控制过渡快慢，让界面更自然流畅。不复杂但容易忽略细节。

以上就是