网页动效设计——什么时候该动，什么时候不该动

网页动效这两年特别流行，滚动触发、渐变过渡成了标配。但我去看不少站，动效做了一堆，体验反而更差了——转场转半天、卡片飘来飘去、鼠标一划整个页面都在抖。今天聊点实在的：动效到底该怎么用。

先记住一条原则：动效只有三个目的——给反馈、引注意、讲故事。除此之外的动效都是噪音。按钮按下要有反应，这是反馈；新功能上线要让人看见，这是引导；页面叙事需要节奏，这是讲故事。一条动效对不上这三条，就该删。

时长是第一个坑。人眼最舒服的动画时长在200到300毫秒之间，超过500毫秒就明显拖沓。我见过一个落地页，Hero图片淡入用了1.2秒，用户等得都想刷新了。统一用250毫秒做基准，特殊场景最多400毫秒。

缓动函数比时长还重要。所有动效默认用ease-out（快入慢出），因为人眼对「物体开始移动」更敏感，快入慢出最自然。别用linear，那个看起来像机器在动。滚动触发的动效还要加一条：只对进入视口的元素触发一次，别让用户往回滚的时候再看一遍。

性能是第三个坑。动效只动transform和opacity这两个属性，这俩走GPU合成，不触发重排重绘。一上来就动width、height、top的，在手机上直接卡成PPT。2026年的新机器性能都够，但中低端安卓机还有一大片，我测试时习惯开Chrome的CPU降速6倍模拟，能扛住再上线。

最后是尊重用户。系统开了「减弱动态效果」的，CSS里用prefers-reduced-motion: reduce直接关掉所有动效。这不是可选项，是无障碍的基本要求。我的经验是：一版设计里，动效砍掉一半，往往更好看。克制才是动效设计的最高级形态。

标签： 网页动效 UI设计 动效设计