你是否觉得自己的网站看起来有些过时，是时候重新设计了？在网上浏览、寻找灵感和最新趋势时，你可能会认为，用一些吸引眼球的动画来为网站增色就是最佳方案。但事实真的如此吗？

网页动画：现状概览

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

虽然 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 任务？

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