乐鱼电竞

  • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    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后过渡的动作会被触发，正方形慢速开始变化，然后逐渐加速，随后慢速变为正圆形。 我们来看看效果：

    延迟效果



    猜你喜欢

    transition-timing-function属性值有哪些？怎么使用？

    如何阻止浏览器默认行为和阻止事件传播?

    css3渐变属性怎么使用？C3渐变用法教程

    乐鱼电竞HTML&JS+前端课程

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】