好的设计是网站或应用程序的重要方面。这些很重要，因为它有助于建立良好的用户界面。过渡和动画是很好的工具，可以帮助为Web带来急需的优雅。早期使用静态设计，但现在运动设计非常流行。
将这些过渡和动画引入网络的一种方法是ZURB Studios。 ZURB从事制作出色的Web设计软件已经有一段时间了，最常见的软件之一就是Motion UI。 Motion UI是ZURB自己的Sass库，除了为您的平台提供动态过渡和动画外，不提供其他任何功能。这两种效果都专门结合到了Motion UI中，这有助于使动画处理变得异常快捷和高效。
Motion UI is a Sass library for quickly creating flexible UI transitions and animations. It is a stand-alone library that controls the transformation effects included in a variety of Foundation components, including Toggler, Reveal and 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']
}));
最后，您可以使用以下给出的代码将Motion UI库导入SASS文件中：
@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还使您能够为指定系列中的多个项目设置动画。您可以从mui-series()开始您的系列，并在此mixin内，可以使用mui-queue()mixin将动画附加到类上。
可以实施Motion UI的许多活动：
必须在网站和应用程序上正确应用Motion UI。在多种情况下，可以通过以下方式实现：
- 欢迎用户：在某些情况下，应用程序和网站会以愉快的问候语欢迎用户。良好的欢迎信息将对客户产生积极影响。谁能跳过两只手见面的诺基亚手机徽标?应用程序和网站上令人愉悦的欢迎屏幕可改善用户体验。您只需要在必要时应用动作，并出于相同的原因就可以有特定的意图。如果可能的话，只有在应用程序和网站的加载被延迟一段时间后才能实施。
- 通知操作：用户需要了解其在您的网站上的表现以及他们的表现。该指南将增强用户体验，并有助于改善网站和应用程序。还必须牢记，实现的动作必须补充并增加应用程序的用户体验，还必须通过使用诸如反弹和速度之类的元素来帮助保持用户的注意力。
- 确认活动：在大多数情况下，需要确认各种活动，例如删除邮件，发送邮件，卸载应用程序，单击某些链接，删除数据等，以及其他此类元素。它用于各种不可逆的活动。在很多情况下，确认过程会更加生动活泼，以吸引更多用户注意，并确保他们在操作时不会犯任何错误。
- 添加有趣的元素：有很多引入有趣元素的应用程序和网站已经非常流行。这样可以轻松浏览应用程序和网站，从而使用户可以轻松地一次又一次地访问。因此，必须将有趣的元素正确添加到网站中。可以引入各种有趣的元素，例如放大，缩小，滑动等，以使显示和内容更简单，更有趣。
- 反馈循环：在大多数情况下，用户与应用程序和网站进行交互。在这种情况下，反馈有助于提供更好的用户体验。假设您尝试在用户想要登录应用程序或网站并输入错误密码时建立响应。在这种情况下，反馈循环非常有用，并且可以在这种情况下帮助用户登录并进行通知。它也可以用来查看网站上的某些动画。这些可用于广泛的应用程序，并且可以在网站的锁定屏幕上查看。
- 刷新内容：社交媒体网站和应用程序的内容非常频繁地更新。在这种情况下，可以快速刷新内容，以便用户获得最佳的用户体验，并在到达时获得内容。在这种情况下，您可以向下滑动屏幕并将其保留以更新Twitter，Instagram，Facebook和其他此类应用程序上的内容。除此之外，您还可以单击可用按钮以查看新更新。
Motion UI是非常必要的，必须在您的网站上采用和实现。这保证了您能够提供最佳的用户体验，并有助于对消费者的思想产生积极的影响。这可以借助过渡和初始线框图来完成。需要预先决定实施的动议，从那时起，您将对最终结果的状态有清晰的了解。