📌  相关文章
📜  HTML | DOM 样式 transitionDelay 属性(1)

📅  最后修改于: 2023-12-03 15:01:12.934000             🧑  作者: Mango

HTML | DOM 样式 transitionDelay 属性

transitionDelay 属性定义转换开始前的延迟时间。当多个属性在不同时间启动转换时，该属性可用于指定延迟时间。

语法
selector {
  transition-delay: time|initial|inherit;
}
  • time：规定延迟的时间量，即需要等待多久开始过渡。可以是秒或毫秒。默认为 0s。
  • initial：将该属性重置为其默认值。
  • inherit：从父元素继承该属性的值。
示例
<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition-property: background-color, transform;
      transition-duration: 2s;
      transition-delay: 1s, 2s;
    }

    div:hover {
      background-color: green;
      transform: translateX(100px);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在上述示例中， transition-delay 属性指定了两个值：1 秒和 2 秒。因此，过渡效果将在鼠标悬停在元素上的 1 秒和 2 秒之后开始。

浏览器支持性

transition-delay 属性在以下浏览器中得到了支持：

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer
  • Microsoft Edge

具体支持版本可查看 Can I Use。

总结

transition-delay 属性非常有用，它允许我们控制过渡效果的延迟时间。我们可以将其与 transition-duration 属性一起使用，以创建出更加复杂的动画效果。