打开某些网站，满屏元素轮流飞入，图片翻转，文字弹跳，滚轮一动整个页面都在跳舞。炫吗？累。动效这东西，用对了是点睛，用过了是灾难。网页设计制作的动效分寸感，是区分成熟团队和炫技型选手的试金石。
动效用在哪三处
值得做动效的位置其实就三类：一是状态反馈，按钮悬停变化、表单提交后的加载动画、操作成功的对勾弹出——这类动效告诉访客“系统收到了你的操作”，最实用；二是视线引导，数字从零滚动到实际值、关键数据依次淡入，把注意力引向重点；三是过渡衔接，页面切换、图片轮播的平移淡入，让变化不生硬。除此之外的装饰性动效，比如背景常年漂浮的粒子、到处游动的元素，能省则省，它们占性能、抢注意力，回报却很低。三处之外的动效，一律先默认砍掉，想要再单独论证。
节奏与性能
网页设计制作的动效时长是灵魂：反馈类零点二到零点三秒，过渡类零点三到零点五秒，超过半秒访客就开始不耐烦。同一页面的动效节奏要统一，这个零点二秒那个零点八秒，整站气质就散了。性能层面有硬要求：动画优先用位移、缩放、透明度这三种属性实现，它们不触发重排，滚动依然顺滑；大量使用阴影和滤镜做动画的页面，手机上一滚一卡。还有一条越来越重要的规范：尊重系统里“减弱动态效果”的设置，晕动症用户是真实存在的群体。
过度动效的信号
三个信号说明做过头了：访客滚动页面时元素不停闪动，抢内容的风头；动效导致内容延迟出现，等半秒才看得到正文；同一个元素有三种以上动画。自测方法很简单——把页面想象成一个售货员，它是在优雅地递东西，还是在原地转圈表演？答案立见。
动效的实现成本
提需求前也该知道动效的成本结构。简单的淡入、位移、变色，前端用现成样式就能实现，几乎不加钱；滚动视差、路径动画、三维翻转这类，工时成倍往上走，效果还不一定值回票价。跟建站方谈动效时，让对方按“必须做、值得做、可不做”三档报价，你按预算勾选。把有限的预算花在按钮反馈和表单提示这类高频动效上，比堆一个华丽的首页开场动画划算得多。
两句实在建议：验收动效时用一部用了几年的旧手机测，卡顿当场现形；动效需求写进合同时附参考网站链接，口头形容“高级的感觉”是最容易翻车的沟通方式，比格网络的项目里动效清单都是照着参考站逐条确认的。
