CSS - animation-timing-function 屬性

上一頁
下一頁

CSS animation-timing-function 屬性決定動畫的速度曲線，它決定動畫從一組 CSS 樣式過渡到另一組 CSS 樣式所花費的時間。它決定了動畫的節奏。

語法

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;

屬性值

值 描述
linear 動畫從開始到結束速度相同。
ease 動畫開始緩慢，然後加速，然後再次減速。預設值。
ease-in 動畫開始緩慢，然後加速。
ease-out 動畫正常播放，但在結束時減速。
ease-in-out 動畫開始緩慢，然後加速，然後再次減速。
step-start 動畫在關鍵幀動畫開始時直接跳轉到結束狀態。
step-end 動畫在關鍵幀動畫結束時跳轉到結束狀態。
steps(int,start|end) 它指定一個步進函式，其中包含步驟數以及開始或結束位置（例如，steps(6, end)）。
cubic-bezier(n,n,n,n) 它使用三次貝塞爾曲線定義自定義計時函式（例如，cubic-bezier(0.25, 0.1, 0.25, 1.0)）。可能的值為 0 到 1。
initial 它將屬性設定為其預設值。
inherit 它從其父元素繼承屬性。

CSS 動畫計時函式屬性示例

以下示例使用不同的值和函式解釋了animation-timing-function屬性。

設定動畫始終保持相同速度

為了讓動畫從開始到結束保持相同的速度，我們使用linear值。在下面的示例中，linear 值已用於 animation-timing-function 屬性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: linear;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Linear value</h3>
</body>

</html>

為動畫設定緩慢的開始和結束

為了讓動畫開始緩慢，然後加速，然後再次減速，我們使用ease值。在下面的示例中，ease 值已用於 animation-timing-function 屬性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease value</h3>
</body>

</html>

為動畫設定緩慢的開始

為了讓動畫開始緩慢然後加速，我們使用ease-in值。在下面的示例中，ease-in 值已用於 animation-timing-function 屬性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-in;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-in value</h3>
</body>

</html>

為動畫設定緩慢的結束

為了讓動畫以正常速度播放，但在結束時減速，我們使用ease-out值。在下面的示例中，ease-out 值已用於 animation-timing-function 屬性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-out;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-out value</h3>
</body>

</html>

為動畫設定緩慢的開始和結束

為了讓動畫開始緩慢，然後加快速度，然後在結束時減速，我們還可以使用 ease-in 和 ease-out 值的組合，即ease-in-out值。在下面的示例中，ease-in-out 值已用於 animation-timing-function 屬性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-in-out;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-in-out value</h3>
</body>

</html>

設定從開始時的突然跳轉

為了讓動畫在動畫的關鍵幀開始時直接到達結束狀態，從而導致突然變化，我們使用step-start值。在下面的示例中，step-start 值已用於 animation-timing-function 屬性。

示例

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: step-start;
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Step-start</div>
</body>

</html>

設定從結束時的突然跳轉

為了讓動畫在動畫的關鍵幀結束時直接到達結束狀態，從而導致突然變化，我們使用step-end值。在下面的示例中，step-end 值已用於 animation-timing-function 屬性。

示例

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: step-end;
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Step-end</div>
</body>

</html>

設定分步動畫

為了讓動畫以分步間隔移動，我們使用steps()函式。它接受兩個引數，第一個是整數，第二個是“start”或“end”，指定值在間隔內發生變化的點。在下面的示例中，整數為 4，第二個引數為 start。

示例

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: steps(4,start);
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Steps(4,start)</div>
</body>

</html>

設定可變速度動畫

為了讓動畫以可變速度進行，我們使用cubic-bezier()函式。此函式表示三次貝塞爾曲線，它由四個點 P0、P1、P2、P3 定義：P0（開始）和 P3（結束）。在下面的示例中，函式中使用了 0.1、0.7、1.0 和 0.1 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: move 6s infinite;
        }

        .cubic {
            animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
        }

        @keyframes move {
            0%,100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
            
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box cubic">Cubic Beizer</div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
animation-timing-function 43.0 10.0 16.0 9.0 30.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告