可以花很多时间来让网站看起来很漂亮。可以设计最耀眼的布局，添加能找到的最美丽的图片，放入优雅的排版——以及做更多的事情来使网站看起来很棒。网站看起来已经很美了。但如何让它感觉也很美?通过使用动画。
动画是使网站活泼起来的东西。如果做得好，它们可以把使用网站变成一种令人愉快的、神奇的体验。
但是，使用动画有正确的方式，也有错误的方式。如果实施不正确，动画会造成迷惑、不和谐和混乱。它们不但不能吸引人们来到网站，反而会疏远他们。
本文hostease美国主机小编将解释如何以正确的方式使用动画，以便创建不仅看起来很美，而且感觉也很美的网站。
为什么应该在网站上添加动画
不应该将动画视为事后的想法。它们不是添加到网站设计中的“香料”。尽管它们做到了，但其目的和作用远不止于此。
动画向用户展示了信息如何在网站上流动。它们可以帮助访问者更好地理解网站如何运作。
以下是使用网站动画众多原因中的几个：
1. 创建流畅的转换。通常情况下，点击按钮，或网站上的链接时，它会立即打开下一个页面、表单或任何旨在打开的东西。
通过动画，可以创建滑入或弹出的过渡，这样用户就可以看到结果的页面出现。网站有”标签式”界面时，这一点特别有用。
2. 提供内容：假设网站上有很多内容，用户需要向下滚动才能查看更多。
为了暗示读者他们必须采取这个行动，可以将内容进行动画处理以在页面上向上滑动。这样，任何人都会得到暗示，向下滚动可能会有更多的内容。
3.
给予反馈：如果网站上有很多互动元素，动画就会特别有用。例如，用户将鼠标悬停在一个按钮上时，可以将其制作成动画，以表示可以点击。或者可以在用户在网站的表格中输入字段时，将其变亮。
有了这种动画，网站将更加方便浏览，因为它会根据人们与网站的互动情况提供反馈。
4. 讲述故事：如果网站相当复杂，并且想给访问者提供一个有关如何使用网站的教程，可以使用动画来实现。
此外，还可以使用动画进行通知，在出现404等错误期间提供缓解效果，以及任何其他目的。
5. 显示进度：如果网站需要显示进度，例如，作为加载栏或其他内容的及时显示，可以使用动画使其生动，以显示这些元素的实时进展。
了解了这些，就能更有效地决定将哪些动画放在网站的什么地方。更多相关的内容可以阅读 如何用惊艳的网站内容吸引访问者
专业提示：在初始线框中添加动画。
如果自己设计网站，或者聘请了设计师，可以将动画添加到线框中。
它可以很简单，例如记下是要滑动图像，还是要随着用户滚动淡入文本，或者当光标停留在按钮上时，按钮放大。更多的相关内容可以阅读 企业建站需要购买什么样的网站空间呢 。
网页设计中动画的12个原则
和任何决定一样，应该知道为什么要做这个决定。为什么X动画需要放在网站的Y元素上?
意识到为什么每个动画都存在于网站，对于创造所寻找的效果至关重要。否则，网站动画不是为了创造令人愉悦的体验，而是在创造无厘头的动画电影。
为了防止这种情况发生，本节将讨论网页设计中动画的12条原则。
它们基于Frank Thomas和Ollie
Johnson广受欢迎的书《生命的幻觉：迪斯尼动画》中所写的原则，迄今为止，它们的思想仍广泛用于各种动画。
原则一：压缩与伸展
这个动画原理表明，如果想让物体看起来栩栩如生，要让它们有一种有质量的感觉。可以通过
“压缩”或”伸展”一个对象与另一个对象交互时的方式来表现这一点。
例如，可以将网站上的按钮制作成动画，让它们在点击时缩小，或者当悬停在菜单项或链接上时变大。
当想向访问者展示他们可以与网站上的元素进行互动时，可以使用这种动画原理。
原则二：预备动作
可能已经注意到，在某些网站上事情会突然发生。点击一个链接，然后立即转到网站的不同部分。或者点击按钮时，弹出窗口会立即出现在面前，或者开始播放视频。
如果网站上发生这种情况，可能会显得有些疏离。
为了解决这个问题，可以在网站上添加 “预备”动画。这些动画 “缓和 “访问者到他们想去的地方或在他们面前的对象。
例如，如果有人点击链接以进入网站的下一页，可以将它做成动画，让内容从左边或右边滑入，让访问者知道他们刚刚访问了前一页。或者，如果有弹出窗口，可以通过动画让它在屏幕上渐渐消失，来
“缓和 “它。
原则三：布局
有时，会希望人们关注屏幕上的某个特定元素，比如文章部分、订阅按钮或捐赠框。要做到这一点，可以做所谓的布局。
布局中可以做两件事：
可以掩盖其余的元素来突出想要的元素。例如，可以模糊网站的其他部分，使想让人注意的元素成为焦点。
可以让某元素移动，而其他元素保持静态。例如，如果网站上有订阅按钮或捐赠按钮，可以将它做成动画，让它摇晃一下或移动，这样人们的目光就会被它吸引。
通过移动主要元素或淡化背景元素，可以将任何想让人们注意的东西 “摆上舞台”。
原则四：连续动作和姿态对应
可以通过两种方式设计动画：
姿态对应：这种方法是指画出动画的关键帧，而中间帧由网络浏览器本身或助手来填充。
连续动作：这种方法是指绘制动画的每一帧，直到得到动画对象的完整流程。
原则五：跟随动作和重叠动作
这种技术，就像 “挤压和拉伸 “一样，可以用来给网站上的元素增加真实感。它决定了不是所有的对象都在同一个地方开始和停止。
例如，假设网站上有一个评论框。可以将它做成动画，让新的评论从上面滑落，下拉并在停止之前反弹。
或者假设网站上有一个列表，每隔一段时间就会有新信息出现。可以对列表进行动画处理，这样新项目进来时会从左边滑入，向右移动一点，然后又弹回原位。
这就为网站上的元素增加了一种真实的运动感。
原则六：缓入缓出
现实生活中，事物并不是以统一的速度开始(和停止)运动。它们通常先获得速度，移动，然后在完全停止之前放慢速度。
可以对网站上的元素进行动画处理，以达到类似的效果。
例如，假设网站有一个加载栏。可以让它以均匀的速度流动。或者，如果想让它看起来以及表现的更逼真，可以让它的速度慢慢增加，当它接近停止时，让它的速度变慢。
这种类型的动画被称为 “缓入缓出”。
原则七：弧线运动
当某个元素(如评论或弹出窗)出现在网站上时，它不一定非要直接出现。可以让它在稳定下来之前反弹到视图中。
或者假设有一个从顶部不断更新的内容提要。它不一定只是呆在那里，还可以弹跳到视图中。
这个原理中的动画看起来就像球在平面上的弹跳一样。
原则八：次要动作
次要动作是指可以用来补充主要动画的动画。例如，假设将一个项目拖入列表中。为了腾出空间，上面和下面的列表项就会移开。这种动画称为次要动作。
原则九：时机
时机是任何动画的重要组成部分。它是指动画需要多长时间才能完全播放出来。动画速度越快，物体的感觉就越轻。动画越慢，就会感觉越重。
原则十：夸张性
夸张是一种很好的动画技术，可以用来增加某些元素的权重。这是强调网站上某个元素的好方式。
例如，假设想突出人们点击的菜单项。为了夸大这一点，可以在用户点击它时让它变大。
同样，假设想突出显示用户当前所在表单中的字段。可以将其动画化放大，以获得想要的效果。
原则十一：立体造型
如果真的想让网站上的元素活起来，可以为它们创建三维版本——并在用户与其互动时对其进行动画处理。
例如，假设有人悬停在网站的一张图片上。可以将其制作成动画，使其翻转，以便人们可以看到另一边的内容。这种动画被称为立体造型。
原则十二：吸引力
最后一个原则，叫做 “吸引力”，指的是整个网站在所有动画组合下的使用感受。
它们是否按照网页设计师的意图来呈现信息?用户是否得到了动画所要讲述的 “故事 “或
“方向”?它们是否都能结合在一起，并增加浏览网站的体验?结合起来，所有这些构成了网站的吸引力。
在网站上添加动画时不能做什么?
到现在为止，已经了解了可以在网站上做什么，不能做什么。是时候学习一些关于在网站上添加动画时不能做什么的技巧了。
- 不要让动画太快(或太慢)：如果网站动画太快或太慢，可能会让访问者感到困惑或沮丧。要优化动画，使它们以一种对用户来说完美的速度流动。
- 当用户期待动作时使用快速动画：网站访问者点击链接或按钮，或做任何动作后，他们希望网站做出响应——在响应中使用快速动画。
- 但如果希望出现一些意想不到的东西，就使用慢速动画，让用户有时间去处理那个意想不到的元素或内容。
- 不要添加不必要的华丽动画：奇形怪状、色彩鲜艳的爆款动画，在网站上会显得很幼稚，也不合适。如果动画不能组织信息流或感觉过度，就不要使用它们。
- 不要添加占用资源的动画：动画需要额外的内存和处理能力——如果不加以处理，可能会导致网站加载缓慢。对于渐变和阴影较重的动画尤其如此。想知道怎么改变网站速度的方法可以了解 提升网站页面速度的方法有哪些
不要添加任何对网站没有帮助的动画。如果只是因为希望它们存在而存在，那么它们有可能会对使用网站的体验产生不良的影响。更多的相关内容可以阅读 网站怎么设计页面才更受用户喜欢？