前端动效手法图鉴4种基本动法动效是反馈不是炫技。悬停效果、过渡、入场动画、脉冲动画……让界面「动起来」的四种基本手法。动效的目的是反馈——告诉用户「你做了什么、系统在做什么」。动效不是炫技快、克制、可关闭是三条铁律。写在前面让界面「动起来」的四种基本手法。动效是反馈不是炫技快、克制、可关闭。这篇文章面向三类读者刚开始用AI写代码、但没系统学过前端的新手前端零基础、看到设计稿叫不出组件名字的爱好者以及有开发经验、但不太会向AI精准描述前端需求的开发者。每个组件都会讲清楚叫什么、长什么样、什么时候用、怎么跟AI描述附好/坏话术对比、常见误区是什么。看完这一篇下次看设计稿、跟开发沟通、给AI提需求你都能精准叫出名字、说清要求。1. 悬停效果Hover Effect别名悬停态、hover 态、悬浮效果这是什么hover/focus/active/disabled 四态可交互元素的完整状态设计缺一不可。任何可交互元素按钮/链接/输入框都要设计四态hover 悬停浅色变化微动效、focus 聚焦可见焦点环键盘可达性关键、active 按下加深/缩小反馈、disabled 禁用降饱和置灰不可点。只做默认态是「AI 一眼假」的重灾区。额外状态别忘selected 选中态如标签/菜单项、loading 态防重复提交、error 态表单。给 AI 的句式「按钮四态默认主色、hover 加深 6%、active 再深并 scale 0.98、disabled 灰色 40% 透明度且不可点focus-visible 显示 2px 主题色焦点环键盘用户可见、鼠标用户不扰」。鼠标悬停时的即时变化变色、抬升、阴影加深告诉用户「这个可以点」。桌面端标配移动端没有 hover别把关键信息只放在悬停里。打个比方交互四态像电梯按键的一生未按默认、手悬着hover、按下active、按钮坏了disabled——每种情况都要有对应的视觉反馈否则乘客不知道按键有没有回应。怎么跟AI说面向AI编程初学者精准的描述 一次生成对的结果。下面是好/坏对比。✅推荐为所有按钮与链接补齐四态样式focus-visible 焦点环必须可见disabled 统一降饱和active 加按下反馈动效。❌避免鼠标放上去变个色就行 —— 只做 hover 忽略 focus/active/disabled键盘用户无焦点提示、禁用项与正常项分不清。常见误区focus 和 focus-visible 一样focus-visible 只在键盘/辅助技术导航时显示避免鼠标点击时也弹焦点框。实战要点鼠标悬停时的即时变化变色、抬升、阴影加深告诉用户「这个可以点」。桌面端标配移动端没有 hover别把关键信息只放在悬停里。2. 过渡Transition别名过渡动画、缓动、补间这是什么属性值变化时平滑过渡hover 改颜色、宽度加 transition 就从突变变渐变。transition 让元素的样式变化不是「啪」地突变而是在一段时间内平滑过渡transition: property 时长 缓动函数。最常见用法是配 hover/focus/class 切换让颜色、位移、透明度柔和变化。要点只过渡你想要的属性transition: background 0.2s 只过渡背景给 transition-property 设 all 会什么都慢半拍过渡需要「前后两个值都可插值」display:none 到 block 无法过渡。和动画的区别transition 靠状态变化触发、一次性animation 自带关键帧、可循环。跟 AI 说「hover 时平滑变颜色加 0.2s 过渡」它就加对了说「做个渐变效果」它可能误解成颜色渐变gradient。状态 A 到 B 之间的平滑过程150-250ms 为宜。没有过渡变化生硬像出了 bug过渡太长页面拖沓。说「加个过渡别太生硬」就是在要它。打个比方transition 像电梯按按钮状态变化不是瞬移而是平滑上升animation 则像自动扶梯一直在动不用按钮。怎么跟AI说面向AI编程初学者精准的描述 一次生成对的结果。下面是好/坏对比。✅推荐hover 时背景色平滑变化加 transition: background-color 0.2s ease。✅推荐这个收起展开用 max-height 过渡注意只过渡这一个属性。❌避免样式变化太突兀了 —— 没说想过渡哪些属性、时长AI 可能给 all 过渡导致处处慢半拍。常见误区transition: all 最省事会让所有属性变化都延迟包括不想要的性能也差。display 变化也能过渡display 不可插值要配合 opacity/visibility 或 max-height 技巧。实战要点状态 A 到 B 之间的平滑过程150-250ms 为宜。没有过渡变化生硬像出了 bug过渡太长页面拖沓。说「加个过渡别太生硬」就是在要它。3. 入场动画Entrance Animation别名进场动画、浮现动画、入场动效这是什么内容出现时的登场方式淡入、上浮、依次错峰出现让页面是「布置好」的而不是「糊一脸」的。时长克制、只进不弹本页元素滚动到眼前时依次浮现用的就是它。实战要点内容出现时的登场方式淡入、上浮、依次错峰出现让页面是「布置好」的而不是「糊一脸」的。时长克制、只进不弹本页元素滚动到眼前时依次浮现用的就是它。4. 脉冲动画Pulse Animation别名呼吸灯、呼吸点、脉冲点这是什么向外扩散波纹的呼吸循环直播 LIVE 点、录制中、在线状态都靠它传递「活着」的信号。一页放两三处是氛围处处都闪就成了警报器。实战要点向外扩散波纹的呼吸循环直播 LIVE 点、录制中、在线状态都靠它传递「活着」的信号。一页放两三处是氛围处处都闪就成了警报器。小结动效的三条铁律快150-500ms不要让用户等、克制微妙变化不要夸张弹跳、可关闭尊重减少动效偏好。动效的目的是反馈——悬停告诉用户「可以点」过渡让变化不生硬入场让页面有节奏脉冲传递「活着」的信号。动效不是炫技是沟通——沟通到位了用户觉得界面「跟手」「有灵气」沟通过度了用户觉得「花里胡哨」「 distract」。跟AI提动效需求时要说清触发条件、时长、缓动函数、减少动效适配。本文基于「浆果 · 标准术语网 · JargonBuster Standard Term」整理适合前端开发、UI设计、产品经理以及所有需要跟界面和AI打交道的人。觉得有用欢迎收藏转发有问题欢迎评论区交流。