CSS - animation-delay 屬性

CSS 的 animation-delay 屬性用於確定動畫開始所需的時間。它以秒或毫秒為單位指定。

正值表示引入時間延遲，而負值表示動畫提前開始，並顯示指定的持續時間。零表示沒有延遲，動畫立即開始。

語法

animation-delay: time | initial | inherit;

屬性值

值	描述
時間	以秒 (s) 或毫秒 (ms) 為單位指定。可以使用正值和負值。正值引入時間延遲。負值使動畫看起來播放了指定的時間。零表示立即播放，也是預設值。這是一個可選欄位。
初始	這將屬性設定為其初始值。
繼承	這從父元素繼承屬性。

CSS animation-delay 屬性示例

下面列出的示例將說明 animation-delay 屬性。

為動畫設定無延遲

在此示例中，我們考慮一個沒有延遲的盒子。該盒子在沒有延遲的情況下向前移動。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 3s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box">
        Animation without Delay
    </div><br>

</html>

為動畫設定正時間延遲

在此示例中，我們考慮一個具有正時間延遲的盒子。由於施加的延遲為 2 秒，因此該盒子在 2 秒後開始向前移動。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 2s;
        }

        .animated-box-delayed {
            animation-delay: 2s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box animated-box-delayed">
        Animation with Postitive Delay
    </div><br>

</html>

為動畫設定負時間延遲

在此示例中，我們考慮一個具有負時間延遲的盒子。該盒子看起來已經移動了 1 秒，如指定的那樣。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .animated-box {
            padding: 20px;
            background-color: #edb753;
            color: #fff;
            animation: slideIn;
            animation-duration: 4s;
        }

        .animated-box-delayed {
            animation-delay: -1s;
        }
    </style>
</head>

<body>
    <h3>CSS animation-delay Property</h3>
    <div class="animated-box animated-box-delayed">
        Animation with Negative Delay
    </div><br>

</html>

支援的瀏覽器

屬性
animation-delay	43.0	10.0	16.0	9.0	30.0

列印頁面