可以花很多时间来让网站看起来很漂亮。可以设计最耀眼的布局，新增能找到的最美丽的图片，放入优雅的排版——以及做更多的事情来使网站看起来很棒。网站看起来已经很美了。但如何让它感觉也很美? 通过使用动画。

动画是使网站活泼起来的东西。如果做得好，它们可以把使用网站变成一种令人愉快的、神奇的体验。

但是，使用动画有正确的方式，也有错误的方式。如果实施不正确，动画会造成迷惑、不和谐和混乱。它们不但不能吸引人们来到网站，反而会疏远他们。

本文 WordPress 站群美国 WordPress 主机小编将解释如何以正确的方式使用动画，以便建立不仅看起来很美，而且感觉也很美的网站。

为什么应该在网站上新增动画

不应该将动画视为事后的想法。它们不是新增到网站设计中的 “香料” 。尽管它们做到了，但其目的和作用远不止于此。

动画向使用者展示了资讯如何在网站上流动。它们可以帮助访问者更好地理解网站如何运作。

以下是使用网站动画众多原因中的几个：

1. 建立流畅的转换。通常情况下，点选按钮，或网站上的连结时，它会立即开启下一个页面、表单或任何旨在开启的东西。

通过动画，可以建立滑入或弹出的过渡，这样使用者就可以看到结果的页面出现。网站有” 标签式” 介面时，这一点特别有用。

2. 提供内容：假设网站上有很多内容，使用者需要向下滚动才能检视更多。

为了暗示读者他们必须采取这个行动，可以将内容进行动画处理以在页面上向上滑动。这样，任何人都会得到暗示，向下滚动可能会有更多的内容。

3.
给予反馈：如果网站上有很多互动元素，动画就会特别有用。例如，使用者将滑鼠悬停在一个按钮上时，可以将其制作成动画，以表示可以点选。或者可以在使用者在网站的表格中输入栏位时，将其变亮。

有了这种动画，网站将更加方便浏览，因为它会根据人们与网站的互动情况提供反馈。

4. 讲述故事：如果网站相当复杂，并且想给访问者提供一个有关如何使用网站的教程，可以使用动画来实现。

此外，还可以使用动画进行通知，在出现 404 等错误期间提供缓解效果，以及任何其他目的。

5. 显示进度：如果网站需要显示进度，例如，作为载入栏或其他内容的及时显示，可以使用动画使其生动，以显示这些元素的实时进展。

了解了这些，就能更有效地决定将哪些动画放在网站的什么地方。更多相关的内容可以阅读 如何用惊艳的网站内容吸引访问者

专业提示：在初始线框中新增动画。

如果自己设计网站，或者聘请了设计师，可以将动画新增到线框中。

它可以很简单，例如记下是要滑动影象，还是要随著使用者滚动淡入文字，或者当游标停留在按钮上时，按钮放大。更多的相关内容可以阅读 企业 WordPress 建站需要购买什么样的网站空间呢 。

WordPress 网页设计中动画的 12 个原则

和任何决定一样，应该知道为什么要做这个决定。为什么 X 动画需要放在网站的 Y 元素上?

意识到为什么每个动画都存在于网站，对于创造所寻找的效果至关重要。否则，网站动画不是为了创造令人愉悦的体验，而是在创造无厘头的动画电影。

为了防止这种情况发生，本节将讨论 WordPress 网页设计中动画的 12 条原则。

它们基于 Frank Thomas 和 Ollie
Johnson 广受欢迎的书《生命的幻觉：迪斯尼动画》中所写的原则，迄今为止，它们的思想仍广泛用于各种动画。

原则一：压缩与伸展

这个动画原理表明，如果想让物体看起来栩栩如生，要让它们有一种有质量的感觉。可以通过
“压缩” 或” 伸展” 一个物件与另一个物件互动时的方式来表现这一点。

例如，可以将网站上的按钮制作成动画，让它们在点选时缩小，或者当悬停在选单项或连结上时变大。

当想向访问者展示他们可以与网站上的元素进行互动时，可以使用这种动画原理。

原则二：预备动作

可能已经注意到，在某些网站上事情会突然发生。点选一个连结，然后立即转到网站的不同部分。或者点选按钮时，弹出视窗会立即出现在面前，或者开始播放视讯。

如果网站上发生这种情况，可能会显得有些疏离。

为了解决这个问题，可以在网站上新增 “预备” 动画。这些动画 “缓和 “访问者到他们想去的地方或在他们面前的物件。

例如，如果有人点选连结以进入网站的下一页，可以将它做成动画，让内容从左边或右边滑入，让访问者知道他们刚刚访问了前一页。或者，如果有弹出视窗，可以通过动画让它在萤幕上渐渐消失，来
“缓和 “它。

原则三：布局

有时，会希望人们关注萤幕上的某个特定元素，比如文章部分、订阅按钮或捐赠框。要做到这一点，可以做所谓的布局。

布局中可以做两件事：

可以掩盖其余的元素来突出想要的元素。例如，可以模糊网站的其他部分，使想让人注意的元素成为焦点。

可以让某元素移动，而其他元素保持静态。例如，如果网站上有订阅按钮或捐赠按钮，可以将它做成动画，让它摇晃一下或移动，这样人们的目光就会被它吸引。

通过移动主要元素或淡化背景元素，可以将任何想让人们注意的东西 “摆上舞台” 。

原则四：连续动作和姿态对应

可以通过两种方式设计动画：

姿态对应：这种方法是指画出动画的关键帧，而中间帧由互联网浏览器本身或助手来填充。

连续动作：这种方法是指绘制动画的每一帧，直到得到动画物件的完整流程。

原则五：跟随动作和重叠动作

这种技术，就像 “挤压和拉伸 “一样，可以用来给网站上的元素增加真实感。它决定了不是所有的物件都在同一个地方开始和停止。

例如，假设网站上有一个评论框。可以将它做成动画，让新的评论从上面滑落，下拉并在停止之前反弹。

或者假设网站上有一个列表，每隔一段时间就会有新资讯出现。可以对列表进行动画处理，这样新专案进来时会从左边滑入，向右移动一点，然后又弹回原位。

这就为网站上的元素增加了一种真实的运动感。

原则六：缓入缓出

现实生活中，事物并不是以统一的速度开始 (和停止) 运动。它们通常先获得速度，移动，然后在完全停止之前放慢速度。

可以对网站上的元素进行动画处理，以达到类似的效果。

例如，假设网站有一个载入栏。可以让它以均匀的速度流动。或者，如果想让它看起来以及表现的更逼真，可以让它的速度慢慢增加，当它接近停止时，让它的速度变慢。

这种型别的动画被称为 “缓入缓出” 。

原则七：弧线运动

当某个元素 (如评论或弹出窗) 出现在网站上时，它不一定非要直接出现。可以让它在稳定下来之前反弹到检视中。

或者假设有一个从顶部不断更新的内容提要。它不一定只是呆在那里，还可以弹跳到检视中。

这个原理中的动画看起来就像球在平面上的弹跳一样。

原则八：次要动作

次要动作是指可以用来补充主要动画的动画。例如，假设将一个专案拖入列表中。为了腾出空间，上面和下面的列表项就会移开。这种动画称为次要动作。

原则九：时机

时机是任何动画的重要组成部分。它是指动画需要多长时间才能完全播放出来。动画速度越快，物体的感觉就越轻。动画越慢，就会感觉越重。

原则十：夸张性

夸张是一种很好的动画技术，可以用来增加某些元素的权重。这是强调网站上某个元素的好方式。

例如，假设想突出人们点选的选单项。为了夸大这一点，可以在使用者点选它时让它变大。

同样，假设想突出显示使用者当前所在表单中的栏位。可以将其动画化放大，以获得想要的效果。

原则十一：立体造型

如果真的想让网站上的元素活起来，可以为它们建立三维版本——并在使用者与其互动时对其进行动画处理。

例如，假设有人悬停在网站的一张图片上。可以将其制作成动画，使其翻转，以便人们可以看到另一边的内容。这种动画被称为立体造型。

原则十二：吸引力

最后一个原则，叫做 “吸引力”，指的是整个网站在所有动画组合下的使用感受。

它们是否按照 WordPress 网页设计师的意图来呈现资讯? 使用者是否得到了动画所要讲述的 “故事 “或
“方向”? 它们是否都能结合在一起，并增加浏览网站的体验? 结合起来，所有这些构成了网站的吸引力。

在网站上新增动画时不能做什么?

到现在为止，已经了解了可以在网站上做什么，不能做什么。是时候学习一些关于在网站上新增动画时不能做什么的技巧了。

不要让动画太快 (或太慢)：如果网站动画太快或太慢，可能会让访问者感到困惑或沮丧。要优化动画，使它们以一种对使用者来说完美的速度流动。当使用者期待动作时使用快速动画：网站访问者点选连结或按钮，或做任何动作后，他们希望网站做出响应——在响应中使用快速动画。但如果希望出现一些意想不到的东西，就使用慢速动画，让使用者有时间去处理那个意想不到的元素或内容。不要新增不必要的华丽动画：奇形怪状、色彩鲜艳的爆款动画，在网站上会显得很幼稚，也不合适。如果动画不能组织资讯流或感觉过度，就不要使用它们。不要新增占用资源的动画：动画需要额外的内存和处理能力——如果不加以处理，可能会导致网站载入缓慢。对于渐变和阴影较重的动画尤其如此。想知道怎么改变网站速度的方法可以了解 提升网站页面速度的方法有哪些

不要新增任何对网站没有帮助的动画。如果只是因为希望它们存在而存在，那么它们有可能会对使用网站的体验产生不良的影响。更多的相关内容可以阅读 网站怎么设计页面才更受使用者喜欢？