首頁技術文章正文

transition-timing-function屬性值有哪些?怎么使用?

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

transition-timing-function屬性規(guī)定過渡效果的速度曲線,默認值為"ease",其基本語法格式如下。

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

從上述語法可以看出,transition-timing-function屬性的取值有很多,常見屬性值及說明如下所示。


transition-timing-function屬性值

linear:指定以相同速度開始至結束的過渡效果,等同于cubic-bezier(0,0,1,1))

ease: 指定以慢速開始,然后加快,最后慢慢結束的過渡效果,等同于cubic-bezier(0.25,0.1,0.25,1)

ease-in:指定以慢速開始,然后逐漸加快(淡入效果)的過渡效果,等同于cubic-bezier(0.42,0,1,1)

ease-out:指定已慢速結束(淡出效果)的過渡效果,等于cubic-bezier(0,0,0.58,1)

ease-in-out:指定以慢速開始和結束的過渡效果,等同于cubic-bezier(0.42,0,0.58,1)

cubic-bezier(n,n,n,n):定義用于加速或者減速的貝賽爾曲線的形狀,它們的值在0~1

下面通過一個案例來演示transition-timing-function屬性的用法,如下所示:

<!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屬性 */
            transition-property: border-radius;
            -webkit-transition-property: border-radius;
            -moz-transition-property: border-radius;
            -o-transition-property: border-radius;

            /* 指定動畫過渡時間 */
            transition-duration: 3s;
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;

            /* 指定動畫慢速開始和結束的過渡效果 */
            transition-timing-function: ease-in-out;
            -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-property屬性指定產(chǎn)生過渡效果的CSS屬性為“border-radius”,并指定過渡動畫由正方形變?yōu)檎龍A形。然后使用transition-duration屬性定義過渡效果需要花費5秒的時間,同時使用transition-timing-function屬性規(guī)定過渡效果以慢速開始和結束。

代碼運行,當鼠標指針懸浮到網(wǎng)頁中的<div>區(qū)域時,過渡的動作將會被觸發(fā),正方形將慢速開始變化,然后逐漸加速,隨后慢速變?yōu)檎龍A形,效果如圖所示。

1635749353701_transition-timing-function.gif



猜你喜歡

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

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

CSS怎樣更換鼠標樣式?

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

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

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