CSS3 animation-duration 属性

CSS3 animation-duration属性

CSS3 animation-duration属性定义了一个动画完成一个循环所需要的时间。这个时间可以用秒（s）或毫秒（ms）为单位。

语法

animation-duration属性的语法如下：

animation-duration: time;

其中time是一个时间值，可用秒或毫秒表示。例如：

animation-duration: 2s;
animation-duration: 500ms;

值

animation-duration属性的值必须是一个正数。如果不带单位，则单位默认为秒（s）。

初始值

animation-duration属性的初始值是0s，表示动画不会播放。

继承性

animation-duration属性不继承。

动画循环时间计算

动画循环时间是指动画完成一次循环所需的时间。如果动画只播放一次，则循环时间和动画持续时间相同。如果动画重复播放，则循环时间等于动画持续时间乘以重复次数。例如，duration为2s，repeat为3，则动画循环时间为6s。

示例

下面是一个使用animation-duration属性的示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: example;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }

        @keyframes example {
            from {left: 0;}
            to {left: 200px;}
        }
    </style>
</head>
<body>

    <div></div>

</body>
</html>

在这个例子中，我们使用CSS3动画来使红色方块水平移动。使用animation-duration属性，我们为动画指定了持续时间为3秒。我们同时设置了animation-iteration-count为infinite，使动画无限循环。

总结

CSS3 animation-duration属性定义了一个动画完成一个循环所需要的时间。该属性可用于添加动画效果、增强用户体验。重要的是注意到duration对于回放是不可控的，通过使用 animation-iteration-count 属性可以控制次数，通过 animation-fill-mode属性控制延迟和动画回放等等方式可以增强控制效果的设置。熟练使用动画效果可以大大增加网站用户体验，也可以在设计网页的时候更加活泼、多变。

CSS3 animation-direction 属性 CSS3 animation-fill-mode 属性