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: 指定設置過渡時間，否則不會產生過渡效果

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屬性用法