网页动效实现

transition 是状态过渡机制，需要触发条件（类名切换、伪类、属性变化），只能定义起点终点之间的过渡，无法中途插手，且反向触发时自动回放过渡。适合交互反馈：悬停变色、展开收起、开关状态切换，写法一行成本极低。animation 是关键帧机制，用 keyframes 定义多段过程，可以自动播放、循环、暂停、倒放，独立于用户触发，能定义中间帧与逐帧步进。适合入场动画、加载循环、持续性装饰动效。能力差异：animation 支持循环次数、播放方向、填充模式、暂停恢复，transition 只有过渡本身。选择原则：由用户当前交互引起的状态变化用 transition；页面生命周期的自动表演用 animation。两者常组合，如卡片用 animation 入场后再用 transition 响应悬停。性能上两者都应只动 transform 与 opacity，其余属性触发重排代价高。这是前端动效的门槛题，设计师懂这个区分就能与开发顺畅对齐。

浏览器渲染分流程：解析样式、布局、绘制、合成。修改几何属性（宽高、边距）触发布局，整棵渲染树重算大小位置，再整片重绘，代价最大；修改视觉属性（颜色、背景、阴影）跳过布局但触发绘制，中等代价；而 transform 与 opacity 有专门优化，浏览器直接把元素当作独立纹理，仅由合成器做矩阵变换与透明度混合，不触发布局与绘制，可在 GPU 上跑，主线程卡顿时仍能保持流畅。这就是动效性能的铁律来源。实操推论：位移用 translate 而非改 top 与 left；缩放用 scale 而非改宽高，或接受布局动画的场景用 FLIP 技巧先测量再 transform；淡入淡出用 opacity 而非 visibility 切换；需要动影子颜色时用伪元素透明度过渡替代。配套注意：新建合成层有内存成本，不要为静止元素滥用提升；will-change 提示按需使用避免滥用。能讲出渲染流水线的因果，是设计师转动效开发的标志性知识点。

FLIP 是用 transform 模拟布局变化动画的技术，解决的问题是布局属性动画性能差与列表重排动画难做。四个字母是流程：First 记录元素动画前的位置尺寸；Last 执行真实布局变更（如排序、插入、删除）后记录新位置；Invert 计算差值并把 transform 设回旧位置，元素瞬间看起来还在原地；Play 移除 transform 让它过渡到新位置，动画全部由 transform 完成，走合成器高性能路径。典型场景：待办清单拖拽排序、瀑布流插入新项、标签切换列表项流动、仪表盘卡片重排，这些如果直接动画布局属性会掉帧，不做动画则生硬跳变。实现要点：位移用 translate、缩放用 scale 并注意变换原点、交叉淡变处理内容差异、多条目用 stagger 延迟、以及长列表只对可视区项做 FLIP。现代浏览器有 View Transitions API 把类似能力平台化，但 FLIP 思想仍是理解布局动画的基础。面试答出四步流程与性能原理，并提一句 View Transitions，就是满分结构。

滚动驱动指动画进度由滚动位置而非时间控制，近年从库方案走向原生 CSS 支持。常见玩法分六类：一是进度指示，顶部阅读进度条随滚动增长；二是视差滚动，前景背景以不同速率移动制造空间深度，幅度克制在百分之十到三十；三是滚动展示（Scrollytelling），图文随滚动逐段进场、图表随滚动生长，长内容叙事标配；四是粘性分区（Sticky Sections），区块吸附屏幕，内部元素随滚动切换，做全屏翻页感；五是磨砂与吸附头图，头图滚动缩小渐隐，导航栏毛玻璃渐现；六是滚动触发的一次性入场动画，元素进入视口时播放，离场不回收避免倒放。实现层面：原生方案用 animation-timeline 的 scroll 与 view 两种时间线，配合 scroll-snap 与 position sticky；渐进增强思路是旧浏览器降级为无动画或 IntersectionObserver 加类名方案。设计要点是节奏可控（用户手在滚动轴上）与避免晕动，过强的视差与旋转会引发不适，同时要尊重系统减弱动效设置。

GSAP 是 JavaScript 动画平台，与 CSS 动画是互补关系，复杂编排时优势明显。一是时间线编排，timeline 把多个动画按时间轴组织，精确控制先后、重叠与整体缩放，一个变量调速整段编排，CSS 做嵌套序列只能靠延时硬凑，改动牵一发动全身。二是能力覆盖广，可动画任意 JS 对象与 SVG 属性、做数值插值与文本打字机、支持物理感拖拽与惯性，MotionPath 让元素沿路径运动，SVG 插件轻松做描边与变形动画。三是控制力强，可全局暂停、寻址单个动画反向播放、进度跳转与慢放调试，与滚动进度绑定精确 scrub。四是跨浏览器一致性与稳健的降级处理。五是生态插件（SplitText 拆字、Flip 布局动画、ScrollTrigger 滚动触发）覆盖了网页动效绝大多数高级需求。使用原则：简单悬停过渡用 CSS 足矣，零依赖更轻；涉及序列编排、滚动叙事、复杂路径就上 GSAP。面试时能说清选择边界而不是无脑上库，体现工程判断。