PaperStreet经常在我们构建的主页上使用动画，并且很容易理解为什么。动画为您的网站带来运动，生活和润色感，创建静态网站根本无法实现的演示。
最棒的是，为您的网站添加动画并不困难。在这里，我们将学习如何以两种不同且令人惊讶的简单方式实现动画。我们将从CSS转换开始，然后简要介绍一个名为Animate.css的流行库的使用。让我们开始吧！
CSS3是最新的Web样式标准，它增加了一个名为过渡的功能。W3Schools声明转换允许您“在给定的持续时间内平滑地（从一个值到另一个值）更改属性值。”简单地说，转换允许您随时间更改（几乎）任何 CSS值。想逐渐更改背景颜色，字体大小或不透明度？过渡，过渡，过渡。以下是如何使用它们。
看下面的精彩框？尝试将鼠标悬停在其上并注意其背景颜色的逐渐变化。
翱翔我！
框的HTML设置如下：
<div class="wonderful-box">
<p>Hover me!</p>
</div>
要定义背景颜色过渡，我们需要做两件事：
告诉方框它的背景属性应该使用转换并随时间变化。
实现一些东西来改变盒子的背景颜色 - 在这种情况下，是悬停状态。
步骤＃1可以使用下面的代码行来实现，这有效地说“如果此元素的背景属性发生变化，那么它将改变超过200毫秒（0.2秒）而不是突然。
.wonderful-box {
transition: background 200ms;
}
请注意，我们使用“background”属性作为将要转换的特定属性。您还可以在其位置使用“all”一词，这将使元素的所有属性转换，而不仅仅是background属性。但是，过度使用“所有”转换可能会影响性能，所以最好只保留开发和测试。
还需要考虑的是动画计时。我们可以在转换上设置缓动属性，以便不是随时间线性变化，而是可以开始缓慢，结束缓慢或其某种组合。在下面应用的“缓入”意味着它将缓慢启动然后轻轻加速到完成。你也可以使用缓出，轻松进入，或者，实际上，任何曲线的变化，更细微的（见easings.net）。我们的代码现在看起来像这样：
.wonderful-box {
transition: background 200ms ease-in;
}
直到CSS3被广泛采用 - 实际上，它已经是，但让我们发挥它的安全性 - 用浏览器特定的代码设置转换是明智的。因此，您可以按照下面设置的方式多次复制转换，其方式可以由各种浏览器解释。
.wonderful-box {
-webkit-transition: background 200ms ease-in;
-moz-transition: background 200ms ease-in;
-ms-transition: background 200ms ease-in;
-o-transition: background 200ms ease-in;
transition: background 200ms ease-in;
}
过渡设置！现在我们需要一些东西来触发盒子背景的变化。如前所述，我们会将此更改设置为在CSS中悬停，如下所示：
.wonderful-box:hover {
background: #E28523;
}
完整的CSS代码如下所示：
.wonderful-box {
background: #eee;
border: 1px solid #000;
display: inline-block;
padding: 10px 20px;
margin: 20px 0;
-webkit-transition: background 200ms ease-in;
-moz-transition: background 200ms ease-in;
-ms-transition: background 200ms ease-in;
-o-transition: background 200ms ease-in;
transition: background 200ms ease-in;
}
.wonderful-box:hover {
background: #E28523;
}
正如您所看到的，过渡使事物变得更加美丽，并且它们无法设置。想尝试一些新的东西吗？尝试在不透明度属性上使用过渡来使事物淡入淡出，或者将它们应用于其他CSS3效果（如盒子阴影）以使其变得有点疯狂。
使用Animate.css制作动画
Animate.css是一个CSS库，可以在方便的包中提供复杂的动画。要查看其动画的功能，请查看网站。
实现Animate.css的速度有多快？你可能会感到惊讶。
首先，从网站下载软件包并将其CSS代码粘贴到样式表中。优选地，此代码将以缩小（压缩）形式添加到样式表的顶部。
剩下的就是将Animate.css类应用于页面上的元素。要设置动画的任何元素都必须包含“动画”类。之后，您可以通过指定第二个类来选择要使用的动画。在这种情况下，我们调用的动画是“slideInLeft”，但有几十个可供选择。您的HTML应如下所示：
<div class="animated slideInLeft">
<p>This text will slide in from the left when the page loads!</p>
</div>
刷新页面，您可能只看到文本幻灯片！很酷，对吧？
我希望本指南为您提供一个启动点，让您开始探索可以通过转换和Animate.css完成的所有操作。玩得开心！
本文地址：
http://www.njanyou.cn/web/2218.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
当客户端拔出“大”设计理念时，该怎么办？
下一篇：
Bullet点如何使您的网站更加用户友好
