过渡属性transition详解

一般transition属性设置在默认状态中。
☞ 过渡属于一种特殊的动画
☞ 通过一种状态向另外一种状态的改变
transition-property属性：
用于指定过渡效果的CSS属性的名称，其过渡效果通常在用户将鼠标移动到元素上时发生
transition:none|(没有属性会获得过渡效果)
           all|(所有属性获得过渡效果)
           property(过渡效果CSS属性的名称，多个名称之间用逗号隔开)

transition-duration属性：
定义完成过渡效果所需时间，默认为0，单位有s|ms
transition-duration:时间

transition-timing-function属性：
定义过渡效果中速度的变化
transition-timing-function:linear|(匀速)
                           ease|(慢-快-慢)
                           ease-in|(慢-快)
                           ease-out|(快-慢)
                           ease-in-out(慢-慢)

transition-delay属性:
定义过渡的延迟时间
transition-delay:time;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*默认状态*/
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition-property: all;
            transition-duration: 2s;
            transition-timing-function: linear;
            transition-delay: 2s;
        }
        /*结束状态*/
        div:hover{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

在这里插入图片描述

transition属性的联写：
transition:property duration timing-function delay;
时间属性不能颠倒顺序(先是过渡持续时间，再是延迟时间)，其他可以
如果使用transition简写属性设置多个过渡效果，需要为每个过渡属性集中指定所有的值，并用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*默认状态*/
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: width 1s linear,height 1s linear 1s,background-color 1s linear 2s;
        }
        /*结束状态*/
        div:hover{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

九层之台始于垒土

发布了44 篇原创文章 · 获赞 3 · 访问量 836

私信关注

过渡属性transition详解

猜你喜欢