CSS animation-duration 属性值说明
| 值 | 说明 |
|---|---|
| time | 指定动画循环所需的时间长度。这可以以秒或者毫秒为单位指定。默认值为0。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父元素继承属性。 |
animation-duration 属性定义了动画完成其一个循环所需的时间长度（以秒或者毫秒为单位）。
动画速记属性经常用于一次性设置所有动画属性。
animation-duration 属性的默认值为 0，这意味着动画立即开始并且关键帧没有效果。
负值无效，它们会导致属性被忽略。
但是一些早期的实现可能会将它们视为等于 0。
当为任何动画属性指定多个逗号分隔值时，它们将以不同的方式添加到动画名称中定义的动画。
animation-duration 属性是 CSS3 属性之一。
| 初始值 | 0 |
|---|---|
| 应用于 | 所有元素，也适用于::before 和 ::after伪元素 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.animationDuration=“4s”； |
语法
animation-duration: time | initial | inherit;
动画持续时间属性的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #eee
}
}
</style>
</head>
<body>
<div class="element">此文本的背景使用 CSS3 动画属性进行动画处理</div>
</body>
</html>
持续时间为 6 秒的 animation-duration 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
60% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
日期：2020-06-02 22:14:23 来源：oir作者：oir