什么是 motion-ui？
motion-ui 是一个基于 CSS3 和 JavaScript 的动画库，它提供了一系列的动画效果和交互特性，能够让我们轻松地为网页添加丰富的视觉效果。motion-ui 的特点包括：
- 轻量级：只有不到 10k 的大小。
- 易于使用：API 简单易懂，无需编写复杂的 CSS 和 JavaScript 代码。
- 可定制性强：可以通过修改源码或覆盖默认样式来实现定制。
如何使用 motion-ui？
motion-ui 是一个 npm 包，可以通过以下命令在你的项目中安装：
npm install motion-ui
安装完成后，你可以将其引入到你的项目中，并开始使用 motion-ui 提供的动画效果和交互特性。
基础动画
motion-ui 提供了一些基础动画效果，例如 fadeIn、fadeOut、slideDown、slideUp 等等。这些动画效果都可以通过在 HTML 元素上添加 data-motion 属性来使用。下面是一个例子：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ------------ ----- ---------------- ----------------------------------------------------- ------- ------ --- --------------------------- ----------- -- ---------------------------- -- - ---- -- -------------- ------- ------------------------------------------------------------ ------- -------展开代码
在上面的例子中，我们引入了 motion-ui 的 CSS 和 JavaScript 文件，并将 fadeIn 和 slideDown 两个动画效果分别应用到了 h1 和 p 元素上。当页面加载完成后，这两个元素会以渐变和滑动的方式显示出来。
进阶动画
除了基础动画效果之外，motion-ui 还提供了一些进阶的动画特性，如动画队列、回调函数等等。下面是一个使用动画队列的例子：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ------------ ----- ---------------- ----------------------------------------------------- ------- ------ --- -------------------- ------ ---- --------------- ----------- -- ----------------------- ------ ----- ------------- -- - ---- -- -------------- ------- ------------------------------------------------------------ ------- -------展开代码
在上面的例子中，我们通过在 data-motion 属性中使用逗号分隔符来定义动画队列。h1 元素会先以渐变的方式显示出来，然后延迟 500ms 后以渐变的方式消失；p 元素也是类似的，在显示出来后延迟 1s 后再以滑动的方式消失。
自定义动画
如果 motion-ui 提供的默认动画效果不能满足我们的需求，那么我们也可以自定义动画。例如，下面是一个自定义的 CSS 动画：
-- -------------------- ---- ------- ---------- ------------ - -- - -------- -- - --- - -------- -- ---------- ----------------- - ---- - -------- -- - -展开代码
这个动画是一个简单的渐隐动画，中间有一个平移的过程。我们可以将它应用到一个 HTML 元素上，如下所示：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ------------ ----- ---------------- ------ - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
