什么是 Motion UI？

Motion UI 是一种基于CSS3和JavaScript的动画库，可以让我们更轻松地创建动态和交互式的用户界面。它由 ZURB 开发，是 Foundation 框架的一部分，可以用于任何网站或应用程序。Motion UI 的目标是提供一个库，使动画易于使用，并且可以适应任何应用程序。可以使用 Sass 或纯 CSS 进行定制。

功能

预置动画

Motion UI 提供了一组可用的动画，可以在需要时直接使用。这个库提供了丰富的预置的 CSS 动画，尤其是丰富的进场和出场动画。

自定义动画

通过 CSS 和 JavaScript 的组合，这个工具箱使你可以定制和创建自己的动画。这个库允许开发人员创建自己的移动，转换和过渡动画。

处理用户输入

Motion UI 带有一组处理用户输入的预设。当用户与页面交互时，这些预设可以使动画更加流畅。这些预设可以帮助开发人员为按钮、输入框和导航栏等组件创建动画。

如何使用

Motion UI 可以通过 NPM 或 Bower 进行安装。你可以选择 Sass 或纯CSS，并在 HTML 页面中链接相关文件。

安装

npm install motion-ui --save

或

bower install motion-ui --save

引入样式

如果你使用 Sass，则可以在你的 app.scss 文件中引入 Motion UI 的样式：

@import 'motion-ui';

如果你使用纯CSS，则可以在 HTML 文件中直接链接 Motion UI 的 CSS 文件：

<link rel="stylesheet" href="path/to/motion-ui.css">

开始使用

现在你已经安装并且引入了 Motion UI，你可以开始使用它提供的动画类了。例如：

<div class="callout" data-closable>
  <button class="close-button" aria-label="Close alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <h5>Important alert!</h5>
  <p>This alert needs your attention, but it's not super important.</p>
</div>

$duration: 1s;
$delay: 0.5s;
$infinite: true;

.callout {
  &.animated {
    @include fadeInRight($duration, $delay, $infinite);
  }
}

在这个例子中，我们为 callout 元素添加了一个进场动画，这个动画具体效果可以在官网上找到。可以使用这些动画类来为其他各种元素创建动画呈现。

总结

Motion UI 是一种有用的动画库，它使 CSS 动画更容易使用和自定义。它还提供了预设的动画，处理用户输入，以及其他有用的功能。如果你希望在你的项目中使用这个库，你可以通过 npm 或 bower 进行安装。