首页技术文章正文

transition-delay属性用法：transition-delay属性与过渡动作

更新时间:2021年11月01日15时25分来源:传智教育浏览次数:

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒(s)或者毫秒(ms)。transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断;设置为正数时，过渡动作会延迟触发。其基本语法格式如下。

transition-delay: time;

我们先来看个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-timing-function</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: yellow;
            border: 5px solid red;
            border-radius: 0px;
        }
        div:hover {
            border-radius: 105px;

            /* 指定动画过渡的CSS属性 */
            -webkit-transition-property: border-radius;
            -moz-transition-property: border-radius;
            -o-transition-property: border-radius;

            /* 指定动画过渡时间 */
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;

            /* 指定动画慢速开始和结束的过渡效果 */
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

我们先来看看效果

transition-timing-function

下面我们在上面的案例的基础上演示transition-delay属性的用法，在第30行代码后增加如下样式。

/*指定动画延迟触发*/
-webkit-transition-delay：2s;　　　　　/*Safari andChrome浏览器兼容代码*/
-moz-transition-delay：2s;　　　　　　 /*Firefox浏览器兼容代码*/
-o-transition-delay：2s;　　　　　　　　/*Opera浏览器兼容代码*/

上述代码使用transition-delay属性指定过渡的动作会延迟2s触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-delay</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: yellow;
            border: 5px solid red;
            border-radius: 0px;
        }
        div:hover {
            border-radius: 105px;

            /* 指定动画过渡的CSS属性 */
            -webkit-transition-property: border-radius;
            -moz-transition-property: border-radius;
            -o-transition-property: border-radius;

            /* 指定动画过渡时间 */
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;

            /* 指定动画慢速开始和结束的过渡效果 */
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;

            /*指定动画延迟触发*/
            -webkit-transition-delay:3s;　　　　　/*Safari andChrome浏览器兼容代码*/
            -moz-transition-delay:3s;　　　　　　 /*Firefox浏览器兼容代码*/
            -o-transition-delay:3s;　　　　　　　 /*Opera浏览器兼容代码*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

刷新页面，当鼠标指针悬浮到网页中的<div>区域时，经过2s后过渡的动作会被触发，正方形慢速开始变化，然后逐渐加速，随后慢速变为正圆形。我们来看看效果：

延迟效果