你是否觉得自己的网站看起来有点过时，是时候重新设计一下了？上网浏览寻找灵感和最新趋势时，你可能会被说服：用吸引眼球的动画来让网站“活”起来就是正确方向。但真的是这样吗？

网页动画：现状概览

人类大脑在生理上天生会被运动的事物所吸引，你可以在大量艺术创作中看到人类想要捕捉运动与变化的欲望。

虽然 Web 最初只是一个由相互链接文档组成的静态媒介，但开发者很快就想出了各种方法，把移动和闪烁的元素加到网页上，为页面增添更多“调味料”。

这里说的是一些原始的尝试，有时候方向不太对，比如臭名昭著的闪烁文字和永远在动的 GIF 图片；但有时也已经意识到动画在提升可用性方面的潜力。用 JavaScript 实现的第一个按钮悬停（rollover）效果就是典型案例：当鼠标悬停在按钮图片上时，一小段 JavaScript 代码会将当前可见图片替换为另一张，从而改变按钮的外观。使用图片让按钮更美观，也更接近现实世界；而悬停效果则为用户在页面上与元素的互动提供了反馈。

网页动画在质量和复杂度上的一次巨大飞跃来自 Adobe 的 Flash 软件。尽管从可用性的角度来说它问题不少，但 Flash 确实让开发者可以在互联网上做出非常了不起的东西，包括互动游戏。

如今是网页动画的“魔法时代”。我们拥有更多支持标准的浏览器、快速的网络连接以及高分辨率的视网膜屏幕，可以呈现身临其境的动画内容。开发者和设计师基本上已经放弃了私有技术，转而采用 Web 标准和开源库，直接在浏览器中播放动画。下面就来快速浏览一下当下都有哪些技术可用。

CSS 动画

在上一个十年的中段，负责制定 Web 开放标准的国际组织——万维网联盟（W3C）开始着手把动画纳入 CSS 规范。2009 年，他们发布了CSS 动画规范的首个公开草案。

对于不太擅长 JavaScript 编程的设计师来说，只用几行 CSS 代码就能让网页中任意元素的颜色、形状和位置动起来，这无疑是非常让人兴奋的事情。

这里有一个在 CodePen 上的基础示例，展示了 CSS 过渡和动画的用法：

参见 CodePen 上 Val Head（@valhead）的作品 Basic CSS animation and transition example，发布于 CodePen。

jQuery

在基于 CSS 的动画还没成为主流之前，大多数设计师都在鼓捣当时最流行的 JavaScript 库——jQuery。jQuery 让网页组件的动画变得非常轻松。突然之间，各种元素在网页中淡入淡出成为家常便饭。即使在如今大部分现代浏览器已经支持 CSS 动画和过渡的情况下，jQuery 仍然常被用来添加或移除包含动画代码的 CSS 样式。

Velocity.js

喜欢 CSS 动画又喜欢 jQuery 的人，一定会喜欢 Velocity。这是一个加载速度快、性能很高的 JavaScript 库，把 jQuery 和 CSS 动画的能力结合在一起，可用于颜色动画、变换（例如旋转、倾斜等）、滚动，以及更多效果。

可以欣赏一下这组精彩的Velocity 动画演示集。

GreenSock

如果要说 JavaScript 动画的“天花板”，GreenSock（简称 GSAP）是一个专业级、跨浏览器的平台，只需少量代码就能实现极其流畅的复杂动画。

去看看 Sarah Drasner 的 CodePen 合集，就能初步感受使用 GreenSock 可以做到什么。

WebGL

WebGL 是 Web Graphics Library（网页图形库）的缩写。这项出色的开源跨平台技术，让开发者能够创建基于标准的超高速 3D 动画图形，并直接在浏览器中运行。它非常适合用来制作游戏，以及建筑、娱乐和艺术等领域的沉浸式 3D 模型。想象一下 WebGL 在教育和科学中的应用：比如设计一个 3D 人体模型，然后实时交互，学习器官如何运作、细胞如何分裂、疾病如何发展等等。

如果你对 WebGL 能做什么感到好奇，可以看看这些很酷的Chrome 实验项目。

在结束对现代 Web 动画工具的盘点之前，还必须提到 W3C 推出的、基于标准的 JavaScript 方案——Web Animations API。统一而标准化的网页动效方法的出现无疑是好消息。不过，在撰文时 Web Animations API 的浏览器支持情况还不一致，因此在实现复杂动画时，使用 GreenSock 等其他框架往往会更可靠。

如何识别优秀的网页动画

如果用得恰当，网页动画可以成为一种极具说服力的品牌和业务服务工具。动画让平面的二维对象看起来更像、也更接近现实中的物体，并在反馈上更自然，从而通过交互和情感连接来吸引网站访客。

难怪动画越来越多地被视为界面设计与用户体验的一部分。

无论是运用在小型界面组件上，还是铺满整页，一些明显的特征可以区分出优秀动画和糟糕动画。Google 在其网站与 App 的视觉设计理念——Material Design 中，对此总结得非常到位：

“在 Material Design 的世界中，动效以优雅而流畅的方式，描述了空间关系、功能与意图。

响应式交互通过对用户输入作出及时、合理而愉悦的屏幕反应，鼓励更深入地探索应用。每一次交互都经过深思熟虑，也许略带趣味，但绝不分散注意力。

动效设计可以高效地引导用户注意力，既传递信息又带来愉悦。用动效平滑地引导用户在不同导航场景间切换，解释屏幕上元素布局的变化，并强化元素层级关系。”

交互设计师还需要关注一些技术细节。例如，选择合适的缓动（easing）类型，调整动画的时间安排，为可放大图标选择用户点击后从哪个点开始放大等。如果你想深入学习，可以阅读 Google 在 Material Design 规范中专门介绍动效的部分。

简而言之，一个执行良好的动画，在因果关系上是合理的，在时间线上是流畅的，能引导访客、对其操作做出反馈，并带来愉悦而非烦扰。

要么做好，要么别做：糟糕的动画如何损害你的网站

现在，要找到一个完全没有任何动画内容的网站几乎不太可能。

下次你在网上浏览时，不妨留意一下，哪些东西真的会把你逼疯？是那段支离破碎、拖拖拉拉才完成的动画序列吗？是页面滚动的节奏和你的阅读节奏完全对不上吗？还是那个拦在你和目标信息之间的弹出对话框？

当一个网站存在这些问题时，访客往往会在刚进入首页时就迅速离开。

就像糟糕的语法和低质量的图片一样，实现粗糙的动画会让你的网站显得不专业。别忘了，你的网站是你在互联网上的“门面”。缺乏专业感会削弱信任，而信任一旦流失，对企业的伤害极大。

但问题还不止于此。不以用户体验为中心的动画甚至可能真正伤害你的访客。早在一段时间前，就有人反馈，iPhone 和 iPad 上 iOS 7 系统中激烈的动画和视差效果，会让他们感到不适。这个事件提升了大家的意识：有些人会因为在屏幕上观看大范围、带有迷惑感的动画，而出现视觉诱发的晕动症。想要了解更负责任的动效设计，可以先从与动画相关的网页内容无障碍指南入手。

在你寻找专业人士来为你的网站设计合适的动画效果之前，不妨考虑先把页面上所有会动、会闪、会弹出的东西都去掉，只保留在用户交互时出现的、细微的背景或颜色过渡。这样一来，访客就能专注于你为他们提供的信息——毕竟这才是他们来到你网站的主要原因。同时，没有干扰之后，他们也更容易去分享你的博客文章、订阅你的邮件列表、购买你的产品等等。换句话说，他们现在可以更好地关注那些对建立与你的关系、了解你的产品或服务至关重要的行动号召。

为什么优秀的网页动画能提升你的网站，也有利于你的业务

前面我们已经指出了优秀网页动画的一些核心特征，以及粗糙动画会如何疏远甚至伤害你网站访客的方式。

在这里，我想再强调一点：优秀的动画非常有力量，开发者可以利用它来吸引和引导用户注意力，把访客“拉进来”，并让他们始终保持兴趣与投入。

在网页动画方面，用户体验设计有了一个强大的盟友。加载内容时的动画进度条、鼠标悬停时轻微晃动的按钮、用动画序列来展示复杂流程、商品在用户选购时“跳入”购物车、通过故事叙事把顾客与品牌连接起来……这些都只是你可以利用动画改善网站访客体验的几个例子。

当访客在浏览你的网站时获得了出色的体验，他们很快就会在社交媒体上和朋友分享，并愿意去执行你为他们设计的各种行动。

简而言之，出色的用户体验能大大提升你把访客转化为客户的机会。

最后给你一条可以马上使用的建议。下次你和网页专业人士讨论要不要在网站上加入动画时，请重点围绕这两个问题：

• 这个动画效果如何帮助网站实现目标？
• 它如何帮助用户完成 X、Y 或 Z 任务？

别忘了，网页动画本身也充满乐趣！