如何通过css transition-duration控制过渡速度

在css的过渡动画体系中，transition-duration是用来定义过渡效果完成所需时间的属性，直接决定了元素样式变化时的速度快慢，是调整过渡动画节奏的核心参数。合理设置这个属性的值，能让页面交互更流畅自然，避免动画过快让用户来不及感知，或者过慢导致页面响应显得拖沓。

transition-duration的基本语法

transition-duration属于css过渡属性的一部分，语法格式非常简单，取值为时间单位，默认值为0s，也就是没有过渡效果，样式变化会瞬间完成。如果需要给多个属性设置不同的过渡时间，可以用逗号分隔多个时间值，对应前面transition-property设置的属性顺序。

常见的时间单位有两种，分别是秒（s）和毫秒（ms），1s等于1000ms，开发者可以根据需要选择合适的单位，比如短时间的微交互用毫秒更精准，长时间的动画用秒更直观。

不同取值对过渡速度的影响

transition-duration的取值直接决定过渡的快慢，取值越小，过渡速度越快，样式变化完成得越快；取值越大，过渡速度越慢，动画过程越平缓。下面通过几个示例来直观展示不同取值的效果。

单个属性的过渡速度设置

下面是一个简单的按钮 hover 效果示例，通过修改transition-duration的值调整背景色变化的速度：

/* 过渡时间0.3秒，速度适中 */
.btn-normal {
  padding: 10px 20px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  /* 设置背景色过渡时间为0.3s */
  transition-property: background-color;
  transition-duration: 0.3s;
}
.btn-normal:hover {
  background-color: #337ecc;
}

/* 过渡时间0.1秒，速度很快 */
.btn-fast {
  padding: 10px 20px;
  background-color: #67c23a;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition-property: background-color;
  transition-duration: 0.1s;
}
.btn-fast:hover {
  background-color: #529b2e;
}

/* 过渡时间1秒，速度很慢 */
.btn-slow {
  padding: 10px 20px;
  background-color: #e6a23c;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition-property: background-color;
  transition-duration: 1s;
}
.btn-slow:hover {
  background-color: #d4912e;
}

多属性不同过渡速度设置

如果一个元素有多个属性需要过渡，还可以给每个属性设置不同的transition-duration，比如下面的卡片示例，宽度变化用0.5s，高度变化用0.8s：

.card {
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
  border-radius: 8px;
  /* 分别设置宽度和高度的过渡属性 */
  transition-property: width, height;
  /* 宽度过渡0.5s，高度过渡0.8s，顺序和上面属性对应 */
  transition-duration: 0.5s, 0.8s;
  transition-timing-function: ease;
}
.card:hover {
  width: 300px;
  height: 220px;
}

和其他过渡属性的配合

transition-duration需要和transition-property配合使用，明确指定哪些属性需要过渡，否则默认所有可过渡属性都会应用该时间。同时还可以结合transition-timing-function调整过渡的速度曲线，比如匀速、先快后慢等，和transition-duration共同决定最终的动画效果。

另外，transition-duration也可以写在简写的transition属性中，顺序一般是属性、时间、速度曲线、延迟时间，比如transition: all 0.3s ease 0s;，这里的0.3s就是transition-duration的值，这种写法更简洁，适合属性较少的场景。

注意事项

• transition-duration的取值不能为负数，否则属性无效，会按照默认值0s处理。
• 如果设置了多个transition-duration值，但是数量比transition-property的属性多，多余的时间值会被忽略；如果时间值更少，后面的属性会重复使用最后一个时间值。
• 不是所有css属性都支持过渡，设置transition-duration之前需要确认目标属性是否属于可过渡属性，比如display属性就不支持过渡，修改display时设置transition-duration不会有动画效果。

掌握transition-duration的用法后，开发者可以根据不同的交互场景调整过渡速度，比如按钮点击的微交互适合用0.1-0.3s的快速过渡，页面模块的展开收起适合用0.3-0.6s的中等速度，长距离的元素位移可以设置0.8s以上的慢速过渡，让用户体验更舒适。

csstransition-duration过渡动画前端样式动画速度修改时间：2026-06-10 08:42:32