最近在一些技术社区里刷到不少 UI 动效作品评论区最常见的一句就是“这也太卷了”。其实动效本身并没有变复杂多少真正拉开差距的是交互逻辑什么时候该动、以多快的速度动、动完之后停在哪里、用户中断操作后怎么收场。这些细节堆在一起才构成了我们看到的“高级感”。这篇文章不打算只展示效果截图而是把 UI 动效从概念、选型、设计逻辑到完整 Demo 代码全部拆开讲。内容会覆盖前端开发者日常最常用的 CSS 动画、Canvas/SVG 特效、IntersectionObserver 滚动监听、requestAnimationFrame 数字滚动、以及性能优化和可访问性处理。无论你是刚接触 UI 动效的新人还是已经在项目里写过不少动画的开发者都能在文章里找到可以直接落地的内容。1. UI 动效到底是什么1.1 动效不是特效很多人把 UI 动效理解成“让页面炫起来”这是一个常见误区。UI 动效的全称是 User Interface Animation它关注的是界面状态变化的过程。比如一个按钮从普通状态变成按下状态中间那几十毫秒的视觉反馈就是动效一个弹窗从屏幕边缘滑入这个滑动过程也是动效页面滚动时新内容淡入同样属于动效。动效和特效的区别在于目标。特效强调视觉冲击力动效强调信息传达和交互反馈。UI 动效设计得好用户能感知到元素之间的逻辑关系设计得不好用户只会觉得页面卡顿、花哨、拖延操作。1.2 动效的常见分类从业务场景看UI 动效可以按下面几个维度划分类型作用典型场景反馈型动效告诉用户操作已被接收按钮按压、点击涟漪、开关切换引导型动效把注意力带到关键内容首屏滚动提示、新功能高亮、指示灯闪烁状态过渡型动效表达界面状态变化页面切换、弹窗出入场、列表加载数据可视化动效让数据变化更直观数字滚动、柱状图生长、地图连线叙事型动效建立情感和品牌记忆启动页动画、空状态插画、吉祥物动作注意一种动效往往同时承担多个角色。比如数字滚动动画既属于数据可视化也属于反馈型动效因为用户操作后看到了数字变化的过程。1.3 为什么现在的 UI 动效越来越“卷”一方面是设备性能在提升。现在的手机和电脑处理 transform、opacity 这类合成器属性非常轻松以前做不了的实时刻画、粒子系统现在普通前端项目也能承载。另一方面是设计体系在成熟主流设计规范和组件库都在强调 motion design比如 Material Design 里对动效时长、缓动曲线都有明确规定。还有一个被低估的原因是开发者工具和框架能力增强。CSS 变量、Web Animations API、IntersectionObserver、Canvas 2D 这些原生接口越来越稳定让前端开发者不需要依赖重型引擎也能做出细腻动效。再加上开源社区里的 shadcn/ui、Framer Motion、GSAP 等方案流行做好动效的门槛已经越来越低。1.4 用户真正在意的是交互逻辑如果你认真分析那些“能看一天”的动效作品会发现一个规律它们的视觉风格可能完全不一样但交互逻辑都很清晰。用户按下按钮按钮有明确的按压反馈用户滚动页面卡片按照错峰节奏依次出现用户悬停卡片卡片跟随鼠标产生微弱的 3D 倾斜。交互逻辑的本质是回答四个问题什么操作触发动效动效持续多长时间动效遵循什么运动规律动效结束后界面处于什么状态把这四个问题想清楚动效自然就“顺”了。如果只关注视觉效果不考虑触发条件和结束状态做出来的动效就会出现“无理由乱动”“动完回不去”“和用户预期不符”三类问题。2. UI 动效技术选型2.1 CSS 实现大部分交互动效的首选CSS 的 transition 和 animation 可以覆盖日常 80% 以上的 UI 动效需求。按钮悬停、元素淡入、卡片翻转、进度条生长、弹窗过渡这些用 CSS 实现非常简单而且浏览器会尽可能把动画放在合成线程执行性能有保障。举例来说让一个按钮悬停时轻微上浮只需要改动 transform.btn { transition: transform 180ms ease; } .btn:hover { transform: translateY(-2px); }关键点是只用 transform 和 opacity 做动画尽量避免修改 width、height、top、left 这类会触发重排的属性。这个原则在后面的性能章节还会详细展开。2.2 Canvas / SVG数据可视化和复杂特效CSS 适合做元素级动效但遇到粒子系统、复杂图表、以及“GitHub 首页那种 3D 地球”级别的场景CSS 就不太够用了。这时候可以选择 Canvas 2D 或者 SVG。Canvas 适合像素级实时绘制比如粒子扩散、鼠标拖尾、动态背景、全局进度环。SVG 适合矢量图形动画比如图标描边、地图路径生长、简单图表。两者各有侧重Canvas 的绘制自由度更高SVG 的 DOM 可访问性和事件绑定更方便。下面是一个用 Canvas 绘制鼠标跟随粒子的最小示例思路const canvas document.getElementById(scene); const ctx canvas.getContext(2d); let particles []; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新粒子位置 particles.forEach((p) { p.x p.vx; p.y p.vy; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fillStyle p.color; ctx.fill(); }); requestAnimationFrame(animate); } animate();这是核心片段只展示了每帧重绘的思路实际项目还需要处理粒子生命周期、鼠标事件、屏幕尺寸变化等问题。2.3 动效库与框架什么时候引入原生 CSS 和 JavaScript 能解决大多数问题但大型项目里团队协作和复杂动画编排通常需要借助工具。GSAP功能全面的动画库支持时间轴、拖拽、滚动触发适合复杂叙事动画。Framer Motion / MotionReact 生态常用声明式 API 对组件动画很友好。Lottie设计师用 After Effects 导出动效 JSON前端直接播放适合品牌插画类动效。引入动效库之前先评估项目复杂度。如果只是按钮反馈和列表入场原生方案就够了如果动效占到页面交互的三分之一以上或者需要和设计师频繁协作再考虑引入库。3. 交互动效的核心设计逻辑3.1 触发动效从哪开始没有动效是凭空播放的一定有触发条件。最常见的触发条件有四类鼠标悬停、点击、滚动进入视口、以及状态变化。鼠标悬停类动效要处理鼠标快速移入移出的情况。比如卡片 3D 悬停效果如果鼠标快速滑过卡片边界动画会在半途被打断这时候需要合理使用 transition 让中间状态平滑过渡而不是让动画瞬间跳回起点。滚动触发类动效建议使用 IntersectionObserver 而不是 scroll 事件监听。IntersectionObserver 是浏览器提供的 API能够异步观察元素是否进入视口性能远好于手动计算距离。状态变化类动效要特别注意初始渲染。比如页面加载时数字先显示 0等数据到达后滚动到目标值这个过程必须保证用户不会看到闪变的中间状态。3.2 过程缓动与时长缓动函数决定了动画在时间轴上的速度变化。直线匀速运动会显得机械真实世界中的物体运动通常有加速和减速过程。CSS 中常见的缓动函数有 ease-out、ease-in-out以及自定义的 cubic-bezier 曲线。交互动效的时长需要控制在一个不会让用户烦躁的范围内。一般认为 150ms 到 400ms 是比较合理的交互反馈区间按钮按压反馈可以短到 100ms 级别弹窗出入场可以长到 300ms 到 500ms数据图表动画可以更长但通常不要超过 1000ms。下面是几个常用缓动参数参考场景建议时长缓动曲线按钮按压反馈120ms - 200msease-out卡片入场300ms - 500mscubic-bezier(0.22, 1, 0.36, 1)弹窗过渡250ms - 400msease-out数字滚动800ms - 1400mseaseOutExpo页面间转场300ms - 600msease-in-out需要强调的是这些只是参考值不同设计规范会有自己的标准。关键是一套页面里动效时长需要有统一基准不要每个动画都用不同速度。3.3 节奏错峰与层级很多初次做动效的开发者会把所有元素同时动画化结果就是页面看起来非常“整齐”但缺少层次感。真正有质感的 UI 动效会刻意制造错峰。错峰的核心是让元素按照某种顺序依次进场。比如三张卡片不是同时出现而是间隔 80ms 逐张出现再比如页面滚动时标题先出现几个月后正文再出现。这种先后关系让用户的视线有一个明确的引导路径。实现错峰最简单的方式是给每个元素增加不同的延迟时间或者通过 JavaScript 动态计算 delay.card:nth-child(1) { transition-delay: 0ms; } .card:nth-child(2) { transition-delay: 100ms; } .card:nth-child(3) { transition-delay: 200ms; }3.4 结束回摆与收尾UI 动效最容易忽略的一环是结束状态。动画播完以后元素停在哪里是否还有残留的 transform 或 opacity 状态这些都需要明确。比如 CSS animation 默认在播放结束后会回到初始状态如果希望停在最后一帧需要设置animation-fill-mode: forwards用 JavaScript 控制动画时要保证动画结束后清掉临时样式避免影响后续交互。再比如弹性动画会导致元素在目标位置来回摆动几次这种效果很有活力但如果回摆幅度太大或持续太久用户会认为页面不稳定。所以收尾逻辑要遵循一个原则动效结束后的状态必须是视觉上静止、逻辑上清晰的。4. 完整实战一个 UI 动效 Demo 页面4.1 项目结构与页面设计这一节我们做一个纯前端的 UI 动效 Demo不依赖任何框架和第三方库只用 HTML、CSS、JavaScript 三个文件。页面包含阅读进度条、数字滚动、卡片滚动入场、卡片 3D 悬停、点击涟漪五个动效基本覆盖了前面讲的反馈型、引导型和状态过渡型动效。项目结构如下ui-motion-demo/ ├─ index.html ├─ style.css └─ app.js页面逻辑很简单顶部一个固定阅读进度条中间一段数据概览区域数字在进入视口后滚动到目标值下方是三张描述 UI 动效的卡片滚动时依次入场鼠标悬停时产生 3D 倾斜最后是一个按钮点击后产生涟漪反馈。4.2 页面结构代码文件路径index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleUI 动效 Demo/title link relstylesheet hrefstyle.css / /head body div idprogressBar classprogress-bar/div header classhero h1UI 动效 Demo/h1 p把反馈、引导、状态切换用动效讲清楚/p a classbtn href#cards查看卡片/a /header main section classstats aria-label数据概览 div classstat-card span classstat-label用户数/span span classstat-number>:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 180ms; --duration-normal: 320ms; --accent: #4f46e5; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.7; } .progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left center; z-index: 100; } .hero { padding: 120px 24px 60px; text-align: center; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto 48px; padding: 0 24px; } .card { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 8px 30px rgba(2, 6, 23, 0.08); opacity: 0; transform: translateY(24px) scale(0.98); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .card.is-visible { opacity: 1; transform: translateY(0) scale(1); } .tilt-card { transform-style: preserve-3d; transition: transform 180ms ease-out; } .tilt-card:hover { box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12); } .btn { display: inline-block; border: 0; border-radius: 12px; background: var(--accent); color: #fff; padding: 12px 20px; cursor: pointer; position: relative; overflow: hidden; text-decoration: none; transition: transform var(--duration-fast) ease, background var(--duration-fast) ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple 600ms ease-out forwards; pointer-events: none; } keyframes ripple { to { transform: scale(4); opacity: 0; } } .stat-number { font-variant-numeric: tabular-nums; } .action-area { text-align: center; padding: 24px; } media (prefers-reduced-motion: reduce) { .card { opacity: 1; transform: none; transition: none; } .ripple { display: none; } .btn:hover { transform: none; } }这里有几个值得注意的细节。进度条使用 scaleX 而不是修改 width目的是避免重排。卡片入场使用 opacity 和 transform 的组合动画结束后通过 is-visible 类保持在最终状态。按钮的 overflow: hidden 是为了让涟漪效果不会溢出按钮边界。4.4 交互逻辑 JavaScript文件路径app.jsconst progressBar document.getElementById(progressBar); const cards document.querySelectorAll(.card); const statNumbers document.querySelectorAll(.stat-number); const rippleBtn document.querySelector(.ripple-btn); // 阅读进度条用 rAF 节流减少滚动事件触发频率 let ticking false; function updateProgress() { const scrollTop window.scrollY; const maxScroll document.documentElement.scrollHeight - window.innerHeight; const progress maxScroll 0 ? scrollTop / maxScroll : 0; if (progressBar) { progressBar.style.transform scaleX(${progress}); } ticking false; } window.addEventListener(scroll, () { if (!ticking) { window.requestAnimationFrame(updateProgress); ticking true; } }, { passive: true }); // 卡片滚动入场IntersectionObserver 触发后添加类并解除观察 const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(is-visible); observer.unobserve(entry.target); } }); }, { threshold: 0.2 }); cards.forEach((card) observer.observe(card)); // 卡片 3D 悬停根据鼠标在卡片内的位置计算旋转角度 cards.forEach((card) { card.addEventListener(mousemove, (event) { const rect card.getBoundingClientRect(); const x (event.clientX - rect.left) / rect.width - 0.5; const y (event.clientY - rect.top) / rect.height - 0.5; card.style.transform perspective(700px) rotateY(${x * 8}deg) rotateX(${y * -8}deg); }); card.addEventListener(mouseleave, () { card.style.transform perspective(700px) rotateY(0deg) rotateX(0deg); }); }); // 数字滚动基于 requestAnimationFrame 的缓动动画 function animateNumber(el) { const target Number(el.dataset.target || 0); const duration 1200; const startTime performance.now(); function easeOutExpo(t) { return t 1 ? 1 : 1 - Math.pow(2, -10 * t); } function update(now) { const progress Math.min((now - startTime) / duration, 1); const eased easeOutExpo(progress); el.textContent Math.round(target * eased).toLocaleString(zh-CN); if (progress 1) { requestAnimationFrame(update); } } requestAnimationFrame(update); } const statObserver new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { const numberEl entry.target; animateNumber(numberEl); statObserver.unobserve(numberEl); } }); }, { threshold: 0.5 }); statNumbers.forEach((el) statObserver.observe(el)); // 点击涟漪动态创建节点动画结束后清理 if (rippleBtn) { rippleBtn.addEventListener(click, (event) { const rect rippleBtn.getBoundingClientRect(); const size Math.max(rect.width, rect.height); const ripple document.createElement(span); ripple.className ripple; ripple.style.width ${size}px; ripple.style.height ${size}px; ripple.style.left ${event.clientX - rect.left - size / 2}px; ripple.style.top ${event.clientY - rect.top - size / 2}px; rippleBtn.appendChild(ripple); ripple.addEventListener(animationend, () { ripple.remove(); }); }); }JavaScript 部分的核心思路是让动效触发和样式变化分离。IntersectionObserver 负责判断元素是否进入视口进入后只添加类名具体动画由 CSS 完成而数字滚动和 3D 悬停这类需要动态计算数值的场景才用 JavaScript 直接操作样式。4.5 运行与验证效果把这四个文件放到同一个目录下直接用浏览器打开 index.html就可以预览完整动效。验证时可以按下面的清单逐项检查验证项预期表现页面加载顶部进度条初始宽度为 0滚动页面进度条随滚动距离从 0 到 1 生长滚动到数据区三个数字从 0 滚到目标值滚动过程有缓动继续滚动到卡片区三张卡片依次入场而不是同时出现鼠标悬停卡片卡片跟随鼠标产生轻微 3D 倾斜移出后恢复点击涟漪按钮点击位置产生白色圆形扩散随后消失如果某个效果没有出现优先打开浏览器开发者工具查看 Elements 面板中对应元素的类名和 computed style。例如卡片没有出现检查是否已经添加 is-visible 类数字没有滚动检查>:root { --duration-instant: 100ms; --duration-fast: 180ms; --duration-normal: 320ms; --duration-slow: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); }团队协作时可以约定常规交互反馈使用 fast组件过渡使用 normal页面级转场使用 slow。这样即使不同开发者负责不同模块整体节奏也会保持一致。6.2 动效参数面向团队成员开放UI 动效不只是前端的工作。设计师要在 Figma 或原型工具中定义动效时长和缓动曲线前端开发者要在代码中还原产品经理要判断动效是否满足用户体验目标。三个角色的沟通成本很高。工程层面的解法是建立动效参数表把关键参数和维护文档放在一起。比如卡片入场动画时长 320ms、延迟间隔 80ms、缓动曲线 easeOutExpo这些数值统一记录方便设计评审和代码审查时对齐。6.3 优先使用 transform 和 opacity浏览器渲染一帧画面一般经历 JavaScript、样式计算、布局、绘制、合成几个阶段。能够跳过布局和绘制阶段、直接进入合成阶段的属性就是 transform 和 opacity。这也是为什么所有 CSS 动画最佳实践都在反复强调这两个属性。如果你发现某个动画必须修改 width 或 height先想想能不能换一种实现方式。比如想让元素宽度从 0 生长到 100%可以改用 scaleX 配合 transform-origin虽然视觉效果略有差异但性能会好很多。6.4 避免无意义的持续动画加载动画、呼吸灯、旋转图标这类持续动画只在特定场景有意义。如果一个装饰性动效持续播放且不传达任何信息用户很快就会视觉疲劳甚至可能诱发眩晕。在工程上这类动画要严格控制使用频率并放在可关闭或可降级的方案中。同时必须支持prefers-reduced-motion让操作系统层面偏好减少动态效果的用户获得静态页面。6.5 监听滚动事件使用被动模式给 window 或 document 添加 scroll、touchstart 等事件时建议加上{ passive: true }。这个参数告诉浏览器事件监听器不会调用 preventDefault因此可以立即开始滚动不需要等待监听器执行完毕。6.6 动效节点的创建和销毁像涟漪这种动态创建节点并播放动画的场景动画结束后一定要移除节点否则随着点击次数增加DOM 节点会越来越多内存占用也会上升。如果动画播放过程中组件被销毁还需要在组件卸载时取消未完成的动画帧或观察器。6.7 关注可访问性UI 动效最容易忽略的用户群体是有视觉障碍、前庭障碍或阅读障碍的用户。可访问性处理有三个基本要求动效不能遮挡或遮盖核心内容。所有信息不能只通过颜色或动效传达。提供减少动态效果的兼容方案。prefers-reduced-motion就是为此设计的 CSS 媒体查询应用层应当主动适配。7. 总结UI 动效的“卷”其实是一个好信号说明行业开始把交互动画当成产品体验的核心部分而不是可有可无的装饰。但越是在视觉上追求极致越要重视背后的交互逻辑触发条件要明确运动过程要顺滑结束状态要清晰不同元素之间要有节奏整体性能不能拖后腿。本文从概念和选型入手介绍了 CSS、Canvas、SVG 以及动效库的适用场景然后围绕触发、过程、节奏、结束四个维度拆解了交互逻辑最后用一个完整的原生 Demo 把阅读进度条、数字滚动、卡片入场、3D 悬停和点击涟漪串了起来并给出了常见的坑点和工程建议。如果你想提升自己的 UI 动效能力看完这篇文章之后可以做两件事第一把上面的 Demo 自己动手敲一遍然后尝试给卡片加入鼠标拖拽效果第二找一个你喜欢的开源组件库分析它的动效参数试着用原生 CSS 复刻其中一个组件。动手实践永远是掌握 UI 动效最有效的方式。