CSS - animation-duration 屬性

CSS animation-duration 屬性定義動畫完成一個迴圈需要的時間。

語法

animation-delay: time | initial | inherit;

屬性值

值	描述
時間	以秒 (s) 或毫秒 (ms) 指定。這指定動畫完成一個迴圈所需的時間長度。
initial	將屬性設定為其初始值。
inherit	從父元素繼承此屬性。

CSS animation-duration 屬性示例

以下列出的示例將使用不同的值來說明 animation-duration 屬性。

設定動畫持續時間

以下示例演示如何使用 animation-duration 屬性建立具有指定持續時間的簡單動畫。

持續時間為 0s 的動畫

當 animation-duration 屬性的持續時間設定為 0s 時，不會發生任何動畫。在以下示例中，由於持續時間設定為 0s，因此紅色方框保持靜止。

示例

 
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: move;
            animation-duration: 0s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 400px;
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Duration Property</h2>
    <div class="box"></div>
</body>

</html>

正數動畫持續時間

當 animation-duration 屬性的持續時間設定為正值時，動畫需要那麼多時間才能完成一個迴圈。在所考慮的示例中，紅色方框需要 5 秒才能完成一個迴圈。

示例

 
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: move;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 400px;
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Duration Property</h2>
    <div class="box"></div>
</body>

</html>

支援的瀏覽器

屬性
animation-duration	43.0	10.0	16.0	9.0	30.0

列印頁面