AI 做网页动效总变成模板感?把＂高级一点＂换成这 16 个词

9 月 27 日，X 上做 AI 视觉教程的 Adrian Punk 发了一条推文，配了段 13 分钟的演示视频：一套完整的网页动效讲解片，从标题入场到卡片交错出现，每个效果都踩在点上。他配文说"当时辛苦学 Code + remotion/Hyperframes 为哪般啊！Claude opus5.5 也太爽了，这才是我要的效果"。

这条片子是他用 Claude Opus 5.5 加 remotion 和 HyperFrames 两个开源框架做出来的，Claude 还是网友 @icycat 赞助的。但真正让 AI"一次做对"的，是他两周前（9 月 14 日）发的一篇方法文《Vibe Coding 网页动效词典（上篇）》。视频里 56 页内容，就是照着这篇词典做的。

演示视频开场页

这篇文章把那篇词典重新整理一遍，原文 16 个词条都在，术语对着各家文档核过，例句可以直接抄。

问题出在哪句话上

你让 AI"给网页加点高级动效"，它通常会把标题、图片和卡片一起淡入。页面动了，但所有东西一个节奏、一个方向，出来的还是模板味。

这是表达问题。你脑中能看到效果，却叫不出它的名字，只会说"丝滑一点""高级一点""像苹果官网那样"，AI 只能按自己的理解发挥。

把描述换成这样，方向就清楚了：

每个效果有名字，有触发时机，有先后顺序。AI 拿到的是指令，不是心情。

拆一个效果，看四层

词典的方法是把任何网页动效沿四层往下拆：用什么工具实现、被什么动作触发、画面具体怎么动、以及怎样才算帮到了用户。

网页动效的四层结构

工具层不用背。CSS、GSAP、Three.js、Lottie 这些是 AI 的事，你只要在提示词里加一句"先检查当前项目的技术栈，简单动效优先用 CSS，别为了一个淡入装大型动画库"，它自己会选。你该花时间的是中间两层：触发方式和动效类型，这是你跟 AI 对话的词汇量所在。

触发方式：动画什么时候开始

同一套淡入，页面打开时播、滚动到屏幕里才播、鼠标悬停才播，观感完全不同。原文列了十种触发方式，日常用得最多的是这三种。

鼠标悬停（Hover）最常见，但多数人只写了一半。悬停只说明"什么时候触发"，之后是抬升、显示遮罩还是磁吸，要接着写。原文给的例句信息密度很高，可以直接体会一下：

注意结尾那句：键盘和触屏怎么办。这一句是多数人写提示词时漏掉的，也是专业网站和 demo 的区别。

进入视口（In view）管内容入场，适合标题、卡片、数据面板第一次出现在屏幕里的时候。描述时补上"只播放一次"还是"每次进入都播"，能省掉返工。

跟随滚动（Scroll-linked）是另一个容易混淆的：进入视口像按下播放键，触发后动画自己播完；跟随滚动像拖视频进度条，滚到哪里播到哪里，往回滚就倒放。产品拆解、品牌故事页用后一种，页面向下滚时产品图逐步展开，区块暂时固定，滚完自然释放。

Pointer 词条的写法示例

动效类型：16 个词的主体

第三层是词典的主体，分三组。

先说控制手感的五个词：缓动（Easing）、时长（Duration）、延迟（Delay）、交错出现（Stagger）、弹簧（Spring）。它们不决定元素往哪移动，但决定动画的质感。同样的淡入，换一套缓动，一个是机器拖动，一个是有人味。

这几个词里建议先学 Easing。记住一条就够：内容进入用减速缓动（ease-out），开始响应要及时，结束慢慢停稳；进度条和持续旋转才用匀速。全篇所有动画共用一种缓动，是新手页面的典型特征。

Stagger 是提升观感性价比最高的一个词。让六张卡片按阅读顺序依次进入，相邻只留很短间隔，整组动画连贯轻快，这一个词就能去掉大半模板感。

Duration 词条：时长分三档

再说内容进出的八个词：淡入（Fade）、交叉淡化（Crossfade）、滑入（Slide）、缩放（Scale）、模糊显现（Blur reveal）、裁剪揭示（Clip-path）、蒙版显现（Mask）、擦除转场（Wipe）。

这里有个使用边界建议抄下来：一个元素可以同时淡入并轻微上移，但每个区块最好只保留一个主动作。模糊显现和裁剪揭示这类重效果，留给大标题和主视觉；正文文字整页都在模糊聚焦，阅读会被拖慢，渲染压力也上去了。

最后是文字出现的三个词：文字显现（Text reveal）是总称，往下分按行（Line reveal）和按词（Word reveal）。原则只有一条：标题可以有表现力，正文尽快稳定。字数越多，越要减少逐字动画。中文没有空格，用按词显现时记得告诉 AI 按语义切短语，不然它的切分经常莫名其妙。

怎么用最省力

我的建议是不用背。把这 16 个词当菜单存着，做页面时对着挑：这个区块要什么触发、什么入场、什么节奏，挑完拼进提示词就行。原文每个词条都配了一句"交给 AI"的例句，格式统一，改改名词就能用。

比词表更值钱的其实是散落在原文里的约束句：延迟只用来建立层级，不能让用户等；自动播放不要抢控制权，用户一操作就暂停；错误提示不能只靠颜色区分。这些句子直接决定成品是"有动效"还是"好用"，抄的时候别漏。

这篇是上篇，覆盖到第 16 个词。视差滚动、磁吸按钮、卡片倾斜、页面转场这些进阶效果，作者说会在后续几篇补齐。照他这次的视频演示看，这条"词典 + Claude"的路子已经跑通了，下篇出来接着看就行。

原作出处：X 平台账号 @AdrianPunk115（Adrian Punk）。词典原文《Vibe Coding 网页动效词典（上篇）：教你准确描述页面怎么动》2026-09-14 发布，截至 2026-09-28 快照：546 赞、87 转、1068 收藏；本文开头的演示视频 2026-09-27 发布，快照：16 赞、3557 次浏览。

事实核查：词典全文经第三方转载页（觉醒 AI 知识库，2026-09-17 更新）获取并与原文开头段落核对一致；remotion 为基于 React 的编程式视频框架，HyperFrames 为 HeyGen 2026 年开源的 HTML 写视频框架（Apache 2.0 协议），两者均真实存在且支持 AI Agent 直接生成；Claude Opus 5.5 的使用情况及 @icycat 赞助一节来自作者自述。文中配图取自作者的公开演示视频，版权归原作者。

本文为二次整理，结构与表述经重组，部分内容由 AI 辅助完成并经人工修订。