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

打印页面