CSS ANIMATION · 动效设计

用 CSS 让页面"活"起来

动效不是炫技，而是引导视线、反馈操作、传达层级的设计语言。本讲覆盖 transition、animation、transform 三大武器，以及"性能友好、克制优雅"的动效设计原则——让网站更有质感、更可信。

CSS 基础 JS 动效补充性能优化

PAIN POINTS

动效做不好，反而拖后腿

🐢

动画一多，页面卡成 PPT

用 JS 动画 width/height、页面同时转 N 个动效，GPU 扛不住，体验全面崩盘。

🎢

动效滥用，看得人头晕

每个元素都在晃，重点信息反而被淹没，用户找不到重点只想关页面。

🖱️

只做了 hover，没做完整反馈

点击、提交、加载、成功失败没有对应动效反馈，交互"断层"，用户不知道操作成没成。

DEMO

四种经典动效实时预览

2 个性能友好属性：transform/opacity

150-300ms微交互最佳时长

1-2 处一屏重点动效上限

0 个JS 动画 width/height 目标

PERFORMANCE CHART

动画属性性能对照

同一视觉效果，用对属性性能天差地别。对照下表选择。

想动的效果	推荐属性	避免	原因
位移 / 滑动	transform: translate	top / left / margin	transform 走合成层，不触发重排
缩放 / 弹出	transform: scale	width / height	缩放不触发布局计算
淡入淡出	opacity	display 切换	opacity 走合成，display 无过渡
旋转	transform: rotate	JS 逐帧修改	合成层动画流畅省电
圆角 / 背景色	border-radius / color	box-shadow 大范围	阴影动画易引发重绘
滚动跟随	position: sticky	JS 滚动监听改 top	sticky 原生合成，性能最佳

PRINCIPLES

动效设计六条准则

只动 transform / opacity

这两者走 GPU 合成，性能最优；避免动画 width/height/top 等触发重排重绘的属性。

时长克制

微交互 150-300ms，页面转场 300-500ms。太短没感觉，太长拖沓。

缓动函数

用 cubic-bezier 或自定义缓动模拟真实物理，避免生硬的 linear 匀速。

尊重系统偏好

用 prefers-reduced-motion 媒体查询，为晕动症用户关闭或减弱动效。

一屏一动

重点动效一页别超过 1-2 处，否则变成干扰而非引导。

进入优先

优先做"进入"动效（出现、展开），退出动效从简，避免等待。

USE CASES

克制而动效，用在这些地方

🖱️

按钮与操作反馈

按压、悬停、加载、成功失败提示，让每个操作都有明确的"回应"。

📜

滚动叙事

长页营销页面配合滚动逐步显现，引导用户按节奏读完整个故事。

🔔

通知与引导

浮动气泡、新手引导、消息弹入，用动效把用户注意力带到该去的地方。

📊

数据可视化

数字滚动、图表生长、进度条推进，让数据从静态变成有说服力的叙事。

想要有质感、不卡顿的品牌官网？

我们把克制的动效设计融入建站方案，性能与观感兼得。

查看建站方案性能优化

FAQ

CSS 动画高频问答

transition 需要状态变化触发（hover 等），定义"从 A 到 B 的过渡"；animation 用 keyframes 定义完整关键帧序列，可自动播放、循环、控制次数与方向。

用 IntersectionObserver 监听元素进入视口后添加动画类，或使用轻量库（AOS 等）。注意 SSR/无 JS 场景的降级——默认可见，JS 增强才隐藏。

内容用真实 DOM 呈现、动效只是视觉增强，不影响搜索引擎抓取。但若动效导致文字瞬间不可读、或依赖 JS 才显示内容，会影响体验与收录。

transform/opacity 走 GPU 合成，优先使用；需要强制 GPU 时可加 will-change 提示，但别滥用（会占内存）。其余属性尽量用 JS 库或避免。

高级感来自克制的时长、贴合的缓动、微妙的位移与阴影配合，以及"先快后慢"的自然物理感。多看优秀作品并复刻是提升最快的路径。

永远让动效"可跳过、不阻塞"。关键操作（表单提交、导航跳转）不因动画延误；尊重 prefers-reduced-motion，提供关闭入口。

用 requestAnimationFrame 驱动数值插值（或 IntersectionObserver 触发），配合缓动函数实现"增长"感；注意 SSR 与无 JS 场景的静态回退。

轻量需求用 CSS 动画 + 自写 JS 即可；复杂动效用 GSAP（功能强、体积可控）；滚动叙事用 ScrollTrigger 或 AOS。别为了一个小效果引入重型库。