CSS transition-delay 属性-之路教程

CSS transition-delay 属性值说明

值	描述
time	指定过渡效果应该等待开始的秒数或者毫秒。默认值为0s。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

CSS transition-delay 属性

transition-delay CSS 属性指定过渡效果应该何时开始。

transition-delay 属性是 CSS3 属性之一。

默认值为 0s，这意味着过渡效果立即开始。

使用 transition-delay 属性指定的时间偏移量将过渡动画偏移指定的量。
偏移量也可以是负值。
当负时间偏移用作 transition-delay 属性的值时，过渡将执行属性的更改时刻，但看起来执行已在指定的偏移处开始。

该值可以是以秒或者毫秒为单位定义的有效时间值，也可以是为单个元素指定的以逗号分隔的时间值列表。
当我们有一个以逗号分隔的属性名称列表时，该列表通常映射到其他与转换相关的属性（转换持续时间、转换时间函数、转换属性）的值。

对于最大的浏览器兼容性扩展，例如 -webkit- 用于 Safari、Google Chrome 和 Opera（较新版本），-moz- 用于 Firefox，-o- 用于旧版本的 Opera ，与此属性一起使用。

初始值	0s.
应用于	所有元素，伪元素 ::before 和 ::after
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.TransitionDelay =“3S”;

语法

transition-delay: time | initial | inherit;

转换延迟属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        -webkit-transition-property: width;
        -moz-transition-property: width;
        -o-transition-property: width;
        transition-property: width;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay 属性示例</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

具有 2 秒延迟的 transition-delay 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        -webkit-transition-property: width height;
        -moz-transition-property: width height;
        -o-transition-property: width height;
        transition-property: width height;
        -webkit-transition-duration: 3s;
        -moz-transition-duration: 3s;
        -o-transition-duration: 3s;
        transition-duration: 3s;
        -webkit-transition-delay: 2s;
        -moz-transition-delay: 2s;
        -o-transition-delay: 2s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay 属性示例</h2>
    <p>将鼠标悬停在元素上并等待 2 秒钟以查看效果。</p>
    <div></div>
  </body>
</html>

日期：2020-06-02 22:14:50 来源：oir作者：oir

←CSS transform变换属性

CSS transition-duration 属性→

CSS transition-delay 属性值说明

语法

转换延迟属性示例：

具有 2 秒延迟的 transition-delay 属性示例：

目录