动画是一种给网站带来生机的有趣的方式。如果使用得当，它可以吸引观众的注意力，使你的网站更有吸引力，甚至提高你为客户提供转换的机会。
不幸的是，就像网页设计世界中的许多事情一样，动画也很容易让人忘乎所以。作为专业的设计师和开发者，我们需要在网站项目中充分利用动画和创建一个充斥着太多活动的网站之间找到一条分界线。
幸运的是，当您阅读完这篇文章时，您将对如何在web设计中使用动画有一个更深入的了解，而不会太过深入。
介绍网页设计中的动画
今天，动画在网络上几乎无处不在。
在过去，当设计师第一次发现他们可以在他们的网站中嵌入移动时，我们看到的动画量往往比需要的要高。有些网站完全使用Flash，所有元素都可以动画化，这并不少见。
幸运的是，现代网页设计的趋势已经把这些做法抛在脑后了。如今，将动画作为整体用户体验的一部分，而不是将其作为吸引用户注意的核心部分，这种做法更加普遍。例如，你可能已经注意到在图库中有大量的动画滑块显示图片，或者当人们悬停在一个按钮上时的过渡动画。
因为完全没有动画是完全有可能构建一个完整的网站的，所以今天创建一个吸引人的网站的关键是确保你使用的每个动画都服务于特定的目的。你的动画应该使网站更有吸引力，更容易使用，更好的导航。添加太多，甚至可能会降低站点的速度。
那么，在网页设计中使用动画有什么意义呢?
1. 加载动画
在网站中使用动画的最好方法之一是在页面加载时分散用户的注意力和乐趣。你可以用动画来传递一种独特的体验，甚至只是突出你的品牌好玩的本质。例如，看看这个名为“Tightrope”的经典加载动画。
你也可以使用粒子动画之类的东西来捕捉客户的注意力，并帮助你的访问者在访问网站时放松。粒子动画可以是交互式的，也可以是非交互式的。当页面加载时间过长时，粒子动画可以很好地防止访问者感到沮丧。
一个名为“粒子之爱”的网站向你展示了你可以用实时动画创造什么样的体验。
你越能让访问者在他们需要的信息正在载入的时候沉浸其中，他们就越不可能点击“返回”按钮。
2. Microinteraction动画
微交互是一种快速而简单的动画，带有特定的用例。通常，当您与特定元素交互时，该动画会提供视觉反馈和信息。
例如，Colin Garven的微交互设计鼓励用户在登录字段中输入他们的电子邮件地址和密码:
理想情况下，使用微交互的最佳方式是让它们尽可能地微妙。这些工具并不是用来窃取页面上其他信息的。然而，它们有时可以鼓励你的观众在转换过程中进入下一个阶段。
动画微交互可以是复杂的，也可以是基本的，随你选择。例如，你可以在以下情况使用它们:
突出显示某个功能是否开启或关闭;
让用户知道什么时候操作成功了(比如用联系人表单发送消息);
展示重要信息，如在桌子上标价;
动画图标在你的网站上鼓励行动;
根据你使用动画的经验，你甚至可以找到带有内置选项的主题和插件。
3.动态背景
一个动画背景可以让你的网站从人群中脱颖而出。然而，重要的是要记住，过多的动画会使你的网站比它需要的更慢和更笨拙。
mystaticself.com网站的动画背景是奇妙的介绍客户的新信息与一个方便的动态菜单。
通常情况下，你应该为一个网站创建自己的动态背景的唯一原因，是它是否会以某种方式改善你的客户体验。
记住，确保你在你的网站上使用的动画不会使你的网站的任何方面更难使用。动画背景需要提供一个赞美你现有的网站，而不是分散客户的什么，他们想做的。
在你开始所有的背景动画之前，专注于动画图像的小部分，一次一小部分。你也可以用非常小的动作来为组件制作动画。
4. 发现隐藏的信息
另一个在网页设计中使用动画的好方法是利用它来展示重要的信息。例如，导航菜单在你的网站设计中是一个重要的组成部分，但它也会占用很多宝贵的空间。
在某些情况下，当用户滚动到一个小框或图标上时，就会出现一个隐藏菜单，这可能很有意义。如果你的网站有大量的页面，你也可以考虑动画下拉菜单。
看看这个有趣的CSS3动画菜单示例:
当你将鼠标悬停在这些部分上时，这些部分会改变颜色并移动，这样更容易看到你点击的确切位置。
当你在玩动画菜单的时候，它完全取决于你想要多有创意。最简单的选择通常是使用一个组件来改变鼠标悬停效果的颜色或形状。然而，您也可以公开隐藏的菜单和额外的信息。
例如，在一些网站上，你可以创建翻转过来的图片来显示另一边的信息。这意味着您可以创建一个关于页面，其中包含团队成员的照片，这些照片可以翻转来显示个人简介信息。
只要确保一切都运行顺利，无论是在台式机上还是在移动设备上。
5. 试着旋转木马
最后，我们来看看在网页设计中使用动画的最简单和最流行的方法。旋转木马是当今web上几乎所有主题的共同组成部分。它们在展示有用信息方面非常有用，比如一个网站提供了什么，或者哪些交易是可行的。
创建旋转木马时，可以让用户控制图像转换的速度，也可以实现自动移动。heathfield.co。英国网站，设计者增加了按钮，让你可以在照片之间来回翻转，同时也确保动画是自动的。
如果没有动画向你展示图片滑入空间，每一张图片之间的转换将是瞬间的——这对观众来说会更不和谐。
滑块是当今web设计中非常常见的组件，以至于客户几乎希望在许多网站上看到它们。这意味着，如果你不想在你的网站上做任何过于戏剧化的事情，你可以享受一个非常有效的体验。
您可以使用滑块的一切，从炫耀产品，显示客户的推荐和更多。这是一种将大量有用信息压缩到网站上一个小空间的好方法。
小心使用网站动画
对于大多数设计动画和网页的设计师来说，最重要的一点是，好东西太多是完全有可能的。当你要为你的客户创造惊人的设计时，你可以利用动画来鼓励更多的参与和独特的体验。然而，你不应该让自己做得太过火。
与其让页面的每个方面都动画化来不断吸引访问者的注意力，不如思考一下如何通过正确的动画选择来让访问者的体验更吸引人。如果整个页面的背景动画不适合你的目标受众，也许导航条或滑块上的自定义动画会是一个不错的选择。
同时，记住要充分利用市场上最新的技术为网页设计添加动画。CSS3、JavaScript和HTML5的良好组合通常可以更容易地创建更具沉浸感、高质量的动画，用户可以在桌面和移动设备上进行交互。
