CSS - transition-duration 属性

CSS transition-duration 属性确定过渡动画完成所需的时间。默认值为 0，表示不会发生任何动画。

可能的值

<time> − 此值表示属性旧值和新值之间过渡的持续时间。当时间为 0s 时，过渡不会发生；相反，两种状态会立即更改。时间的任何负值都会使声明无效。

过渡效果将立即以 0s（或 0ms）的值开始。
正值将导致过渡效果延迟指定的时间量。
负值将立即启动过渡效果，并在效果中途启动，模拟动画，就好像它已运行了指定的时间量一样。

在使用 CSS 过渡时，您可以分配多个持续时间，每个持续时间对应于主列表中 transition-property 定义的属性。如果指定的持续时间小于主列表中的持续时间，则用户代理会重复该列表；如果更多，则会截断到正确的尺寸。在两种情况下，CSS 声明仍然有效。

应用于

所有元素，::before 和 ::after 伪元素。

语法

transition-duration: 6s;

CSS transition-duration - <time>

以下示例演示了 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>

打印页面