首頁技術文章正文

transition屬性用法【黑馬程序員CC3教程】

更新時間:2021-11-01 來源:黑馬程序員 瀏覽量:

transition屬性是一個復合屬性,用于在一個屬性中設置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性。其基本語法格式如下。

transition:property duration timing-function delay;

property:  指定應用過渡效果的CSS屬性的名稱,其過渡效果通常在用戶將指針移動到元素上時發(fā)生。

duration:  指定設置過渡時間,否則不會產生過渡效果

timing-function:  指定規(guī)定過渡效果的速度曲線,默認值為"ease",linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)

delay: 規(guī)定過渡效果何時開始,默認值為0,常用單位是秒(s)或者毫秒(ms)。transition-delay的屬性值可以為正整數、負整數和0。當設置為負數時,過渡動作會從該時間點開始,之前的動作被截斷;設置為正數時,過渡動作會延遲觸發(fā)。

在使用transition屬性設置多個過渡效果時,它的各個參數必須按照順序進行定義,不能顛倒。如果中設置的四個過渡屬性,可以直接通過如下代碼實現。

/* 綜合寫法 */
transition:border-radius 5s ease-in-out 2s;


/* 拆分寫法 */

    /* 指定動畫過渡的CSS屬性 */
    -webkit-transition-property: border-radius;		/*Safari andChrome瀏覽器兼容代碼*/
    -moz-transition-property: border-radius;		/*Firefox瀏覽器兼容代碼*/
    -o-transition-property: border-radius;		/*Opera瀏覽器兼容代碼*/
    
    /* 指定動畫過渡時間 */
    -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;
    
    /*指定動畫延遲觸發(fā)*/
    -webkit-transition-delay:3s;
    -moz-transition-delay:3s;
    -o-transition-delay:3s;


完整案例代碼:

<!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;
            transition: border-radius 3s ease-in-out 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

無論是單個屬性還是簡寫屬性,使用時都可以實現多個過渡效果。如果使用transition簡寫屬性設置多種過渡效果,需要為每個過渡屬性集中指定所有的值,并且使用逗號進行分隔。

transition屬性用法

添加QQ:435946716,免費獲取全套《Html5+CSS3全套教程》。



猜你喜歡

css3漸變屬性有哪些?css3漸變屬性用法詳解

css3屬性選擇器有哪些?css3屬性選擇器介紹

CSS怎樣更換鼠標樣式?

transition-property屬性有幾個屬性值?

黑馬程序員HTML&JS+前端課程

分享到:
在線咨詢 我要報名
和我們在線交談!