本文档介绍了reveal.js中的自动动画功能，该功能通过自动匹配元素过渡，实现幻灯片之间的平滑过渡。此功能允许演示者在无需手动编写动画代码的情况下创建视觉上引人入胜的过渡。文档涵盖了配置选项、使用示例以及自动动画系统的技术实现细节。
有关标准幻灯片过渡的信息，请参阅核心配置文档。有关单张幻灯片中逐步显示内容的信息，请参阅片段。
自动动画是一项内置功能，可自动检测相邻幻灯片中的匹配元素，并在它们的状态之间创建平滑过渡。启用自动动画进行幻灯片导航时，匹配的元素将从当前幻灯片中的位置、大小和样式过渡到下一张幻灯片中的属性。
此功能通过识别源幻灯片和目标幻灯片中都存在的元素，然后应用CSS过渡来为它们的属性变化设置动画。
来源：test/test-auto-animate.html1-152
当使用data-auto-animate属性在幻灯片之间导航时，AutoAnimate控制器将执行以下过程
来源：test/test-auto-animate.html23-33 test/test-auto-animate.html83-88
要启用幻灯片之间的自动动画，请将data-auto-animate属性添加到包含匹配元素的连续幻灯片中
AutoAnimate控制器会在幻灯片之间识别匹配的元素，并应用过渡来为它们的属性变化设置动画。
来源：test/test-auto-animate.html23-33
您可以配置reveal.js实例来全局启用或禁用自动动画。
通过在幻灯片中添加data-auto-animate-duration属性，控制幻灯片中所有过渡的持续时间。
使用data-auto-animate-duration属性来自定义特定元素的动画持续时间。
来源：test/test-auto-animate.html29-32 test/test-auto-animate.html35-39 test/test-auto-animate.html102-111 test/test-auto-animate.html113-129
自动动画会在幻灯片之间识别匹配的元素，并应用过渡来为它们的属性变化设置动画。
当激活自动动画时
data-auto-animate-target属性来源：test/test-auto-animate.html83-88 test/test-auto-animate.html90-94
自动动画可以在幻灯片之间过渡多种属性，包括：
| 属性 | 用例示例 |
|---|---|
| 位置 | 元素从一个位置移动到另一个位置 |
| 大小 | 元素的大小变化 |
| 不透明度 | 元素的淡入或淡出 |
| 颜色 | 文本或背景颜色的变化 |
| 变换 | 元素的旋转、缩放或平移 |
来源：test/test-auto-animate.html23-33
自动动画与片段配合使用，但了解它们的交互方式很重要。
fragment类的元素可以在幻灯片之间进行动画处理。来源：test/test-auto-animate.html45-55
自动动画为跨幻灯片的匹配元素分配data-auto-animate-target属性。
data-auto-animate-target值。data-auto-animate-target值。此属性用于跟踪哪些元素在动画方面相互对应。
data-auto-animate的幻灯片之间进行过渡时，系统会计算元素属性的差异。自动动画仅在同时具有data-auto-animate属性的连续幻灯片之间工作。如果中间有一个非自动动画的幻灯片，则不会应用动画。
来源：test/test-auto-animate.html96-100
data-auto-animate-duration来控制复杂动画的时机。