优质的设计是网站或应用程序不可或缺的一个要素。之所以重要，是因为它有助于构建良好的用户界面。过渡效果和动画是极佳的工具，可以为 Web 带来急需的优雅感。在早期，人们采用的是静态设计，但现在动态设计已经非常流行。
将过渡效果和动画引入 Web 的一种方式是通过 ZURB Studios。ZURB 一直致力于制作酷炫的 Web 设计软件，其中最常见的一个叫做 Motion UI。Motion UI 是 ZURB 自有的 Sass 库，它为您的平台专门提供动态过渡效果和动画。这两种效果被专门集成到 Motion UI 中，这使得动画制作过程变得极其快速且高效。
> Motion UI 是一个用于快速创建灵活的 UI 过渡效果和动画的 Sass 库。它是一个独立的库，用于控制包含在 Foundation 各种组件中的转换效果，包括 Toggler、Reveal 和 Orbit。
入门指南
我们可以使用 npm 或 bower 在项目中安装 Motion UI 库。该包含有一个 CSS 文件，其中包含了一系列预制的过渡效果和动画，以及允许我们构建自定义效果的 Sass 源文件。
npm install motion-ui --save-dev
bower install motion-ui --save-dev
Motion UI 作为 CSS 包提供了一组预制效果。这包括滑动、缩放、淡入淡出、铰链和旋转的过渡效果，以及几个内置动画。
我们可以通过使用如下所示的 config.rb 在 Compass 中添加指向 Motion UI 库的路径：
add_import_path ‘node_modules/motion-ui/src‘
我们可以使用以下代码行在 gulp-sass 中包含该路径：
gulp.src(‘./src/scss/app.scss‘)
.pipe(sass({
includePaths: [‘node_modules/motion-ui/src‘]
}));
最后，我们可以使用下面给出的代码在 SASS 文件中导入 Motion UI 库：
@import ‘motion-ui‘
@include motion-ui-transitions;
@include motion-ui-animations;
过渡效果
就像我们在幻灯片或视频中使用的过渡一样，这里的过渡效果旨在帮助组件进出网站时的转换过程。Motion UI 包包含了一个小型的 JavaScript 库，旨在触发这些过渡效果。
#### 内置过渡效果
Foundation 通过使用由 Motion UI 库创建的过渡类来提供过渡效果，其中包括了二十多个内置过渡类。
我们可以在导入库后，通过将以下代码添加到 Sass 文件中来启用它们：
@include motion-ui-transitions;
#### 自定义过渡效果
我们可以使用 Motion UI 的 mixin 库来设置自定义过渡类。
例如，mui-fade() 通过调整元素的不透明度来创建淡入淡出过渡效果。
@include mui-fade(
$state: in,
$from: in,
$to: out,
$duration: 0.5s,
$timing: easeInOut
);
动画
我们还可以利用 Motion UI 过渡效果来创建 CSS 动画。该库还允许创建系列效果，即多个元素上的动画按队列依次发生。所有这些动画都是使用 mixin mui-animation() 创建的，它用于创建 CSS 关键帧动画。
#### 系列动画
除了标准的单次动画外，Motion UI 还允许我们在指定的系列中为多个项目设置动画。我们可以使用 INLINECODE9e499e63 开始我们的系列，在这个 mixin 内部，我们可以使用 INLINECODE86706768 mixin 将动画附加到类上。
Motion UI 可以在许多场景中实施：
在您的网站和应用程序上正确应用 Motion UI 至关重要。在多种情况下，这可以通过以下方式实现：
- 欢迎用户： 在某些情况下，应用程序和网站会用令人愉快的问候信息欢迎用户。一条良好的欢迎信息会对客户产生积极影响。谁能忘记诺基亚手机上那两只手相握的 Logo 呢？应用程序和网站上令人愉快的欢迎屏幕能改善用户体验。您只需要在必要时应用动作，并为此具有特定的意图。如果可能的话，这仅应在应用程序和网站加载延迟一段时间时才实施。
- 告知操作： 用户需要了解他们在您的网站上将如何操作以及如何执行。这种指导将增强 UX（用户体验），并有助于改进网站和应用程序。还必须记住，实施的动作必须补充并增加应用程序的用户体验，同时必须通过使用弹跳和速度等元素来帮助保持用户的注意力。
- 确认活动： 在大多数情况下，各种活动（如删除邮件、发送邮件、卸载应用程序、点击等）