transition-duration

**transition-duration** CSS 属性设置过渡动画完成所需的时间长度。 默认情况下，值为 0s，表示不会发生动画。

尝试一下

您可以指定多个持续时间； 每个持续时间将应用于由 transition-property 属性指定的相应属性，该属性充当主列表。 如果指定的持续时间数量少于主列表中的数量，用户代理会重复持续时间列表。 如果指定的持续时间数量多于主列表中的数量，列表将被截断到正确的尺寸。 在这两种情况下，CSS 声明都保持有效。

语法

css
/* <time> values */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* Global values */
transition-duration: inherit;
transition-duration: initial;
transition-duration: revert;
transition-duration: revert-layer;
transition-duration: unset;

Values

<time>

是 <time>，表示从属性旧值到新值过渡所需的时间量。 时间为 0s 表示不会发生过渡，即两种状态之间的切换将是即时的。 时间的负值将导致声明无效。

正式定义

Initial value0s
Applies to所有元素，::before 和 ::after 伪元素
Inheritedno
Computed value如指定
Animation type不可动画

正式语法

transition-duration = 
  <time [0s,∞]>#

示例

显示不同持续时间的示例

HTML

html
<div class="box duration-1">0.5 seconds</div>

<div class="box duration-2">2 seconds</div>

<div class="box duration-3">4 seconds</div>

<button id="change">Change</button>

CSS

css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}

JavaScript

js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);

Result

规范

Specification
CSS Transitions
# transition-duration-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅