编辑“︁CSS动画持续时间”︁（章节）

= CSS动画持续时间 =

'''CSS动画持续时间'''（Animation Duration）是CSS动画属性的关键参数之一，用于定义动画完成一个完整周期所需的时间。通过调整动画持续时间，开发者可以控制动画的快慢，从而优化用户体验或实现特定的视觉效果。

== 基本概念 ==
动画持续时间使用<code>animation-duration</code>属性定义，其值可以是秒（<code>s</code>）或毫秒（<code>ms</code>）。例如：
* <code>1s</code> 表示动画持续1秒
* <code>500ms</code> 表示动画持续500毫秒（等同于0.5秒）

默认情况下，如果未指定<code>animation-duration</code>，浏览器会使用默认值<code>0s</code>，这意味着动画不会播放。

=== 语法 ===
<pre>
animation-duration: &lt;time&gt;;
</pre>
其中<code>&lt;time&gt;</code>可以是正数或零，但不能为负数。

== 代码示例 ==
以下是一个简单的示例，展示如何使用<code>animation-duration</code>控制动画速度：

<syntaxhighlight lang="css">
/* 定义一个名为 "slide" 的关键帧动画 */
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

/* 应用动画，并设置持续时间为2秒 */
.box {
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
</syntaxhighlight>

'''输出效果'''：一个元素会从初始位置向右平滑移动100像素，整个过程耗时2秒，并无限循环。

== 进阶用法 ==
=== 多阶段动画 ===
对于复杂的关键帧动画，可以结合百分比定义不同阶段的持续时间分配。例如：

<syntaxhighlight lang="css">
@keyframes color-change {
    0% { background-color: red; }
    50% { background-color: yellow; }
    100% { background-color: green; }
}

.element {
    animation-name: color-change;
    animation-duration: 4s;
}
</syntaxhighlight>

'''解释'''：动画总时长为4秒：
* 0%到50%（前2秒）：从红色渐变到黄色
* 50%到100%（后2秒）：从黄色渐变到绿色

=== 多个动画的不同持续时间 ===
可以为同一元素应用多个动画，并为每个动画设置不同的持续时间：

<syntaxhighlight lang="css">
@keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.target {
    animation-name: move, rotate;
    animation-duration: 3s, 1s;
    animation-iteration-count: infinite;
}
</syntaxhighlight>

'''效果'''：元素会在3秒内水平移动200像素，同时每1秒完成一次360度旋转。

== 数学关系 ==
动画的完成进度与时间的关系可以用线性函数表示：
<math>
progress(t) = \frac{t}{duration}
</math>
其中：
* <math>t</math> 是当前时间
* <math>duration</math> 是动画总持续时间

== 性能考虑 ==
较长的动画持续时间可能导致性能问题，尤其是在低端设备上。建议：
* 避免使用超过几秒的动画
* 对移动设备进行测试
* 使用<code>will-change</code>属性优化性能

== 实际应用案例 ==
=== 加载动画 ===
通过控制动画持续时间，可以创建自然的加载指示器：

<syntaxhighlight lang="css">
@keyframes pulse {
    0% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.5; transform: scale(0.9); }
}

.loader {
    animation: pulse 1.5s infinite;
}
</syntaxhighlight>

=== 页面过渡效果 ===
页面元素入场动画通常需要精确的持续时间控制以实现协调效果：

<syntaxhighlight lang="css">
.card {
    animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
</syntaxhighlight>

== 时间曲线图 ==
以下mermaid图表展示了不同持续时间下动画进度的对比：

<mermaid>
graph LR
    A[0s] -->|即时完成| B[100%]
    C[1s] -->|线性进度| D[50% at 0.5s]
    E[2s] -->|更慢变化| F[25% at 0.5s]
</mermaid>

== 浏览器兼容性 ==
<code>animation-duration</code>属性在现代浏览器中得到广泛支持，包括：
* Chrome 43+
* Firefox 16+
* Safari 9+
* Edge 12+
* Opera 30+

对于需要兼容旧版浏览器的情况，应考虑使用前缀（如<code>-webkit-animation-duration</code>）。

== 最佳实践 ==
1. 保持动画持续时间在0.2s-1s之间以获得最佳用户体验
2. 复杂的动画可以使用稍长时间（但通常不超过3s）
3. 测试不同持续时间的视觉效果
4. 考虑使用CSS变量实现可配置的动画持续时间：

<syntaxhighlight lang="css">
:root {
    --animation-duration: 0.5s;
}

.animated-element {
    animation-duration: var(--animation-duration);
}
</syntaxhighlight>

== 总结 ==
CSS动画持续时间是控制动画节奏的基本属性，通过合理设置可以：
* 创建自然的界面过渡
* 引导用户注意力
* 增强用户体验
* 实现复杂的动画序列

掌握这一概念是成为前端动画专家的基础步骤之一。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS动画]]