CSS transition-duration 属性确定过渡动画完成所需的时间。默认值为 0，表示不会发生任何动画。
可能的值
- <time> − 此值表示属性的旧值和新值之间转换的持续时间。当时间为 0s 时，不会发生过渡;相反，这两种状态将立即发生变化。该时间的任何负值都将使声明无效。
- 过渡效果将立即以 0s（或 0ms）的值开始。
- 如果为正值，则在指定的时间内，过渡效应将出现延迟。
- 如果为负值，则过渡效果将立即开始，并在效果进行中途启动，模拟动画，就好像它已经运行了指定的时间一样。
使用 CSS 过渡时，您可以分配多个持续时间，每个持续时间对应于主列表中的过渡属性定义的属性。如果指定的持续时间小于主列表中的持续时间，则用户代理将重复该列表;如果更多，它将截断为正确的大小。CSS 声明在这两种情况下都有效。
适用于
语法
transition-duration: 6s;
CSS transition-duration - <时间>
以下示例演示了 transition-duration： 4s 属性将过渡效果的持续时间指定为 4s −
<html>
<head>
<style>
.transition-box {
font-size: 14px;
width: 100px;
padding: 10px;
border-radius: 10px;
transition: margin-left, background-color;
background-color: violet;
transition-duration: 4s;
}
.transition-box:hover {
background-color: lightblue;
margin-left: 70px;
}
</style>
</head>
<body>
<div class="transition-box">Hover over me</div>
</body>
</html>
CSS transition-duration - 滑动效果
以下示例演示了向上滑动效果。当您将鼠标悬停在盒子上时，其他盒子会一个接一个地出现，具有不同的过渡持续时间 -
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 100px;
}
.box {
text-align: center;
padding: 1rem;
background-color: lightskyblue;
margin: 0 5px;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.box div {
text-decoration: none;
font-size: 20px;
display: block;
}
.box div span {
display: block;
background: lightcyan;
padding: 10px;
font-size: 16px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
transform: translateY(100%);
transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
.box:hover div span {
transform: translateY(0);
}
.box div span:nth-child(1) {
transition-duration: 0.1s;
background: lightsalmon;
}
.box div span:nth-child(2) {
transition-duration: 2s;
background: lightgray;
}
.box div span:nth-child(3) {
transition-duration: 5s;
background: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="box"><div>Hover Over Me
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
</div>
</div>
</body>
</html>
