先说触发 再说怎么动

匀速像被机器拖动。进入常用 Ease-out：开始较快，结束时慢下来。

按钮要迅速，弹窗可以稍慢，大图揭示再柔和一点。页面里应有统一的快慢关系。

标题先出现，说明稍后，按钮最后。等待太久会让人以为页面卡住。

一组相似元素依次开始。整组要像连续动作，间隔太大会变成排队等候。

少量回弹，快速停稳，不要果冻感。长正文和大面积背景不需要到处弹。

适合加载、弹窗、提示。一个元素可以同时淡入并轻微上移，但主动作只留一个。

旧内容淡出的同时新内容淡入。两个位置相同、内容不同的状态最合适。

方向传达空间关系：右侧抽屉从右边进入，底部操作面板从下方升起。

弹窗从小到正常尺寸。长段文字频繁缩放会影响阅读稳定性。

适合大标题和主视觉。整页文字都使用模糊会增加渲染压力，也会拖慢阅读。

像打开一扇窗。窗外的图片一直存在，只是可见范围慢慢扩大。

光线扫过、墨迹扩散。需要清楚几何边界时优先用 Clip-path。

标题可以有表现力，正文应该尽快稳定下来。字数越多，越要减少逐字动画。

保留完整语句，比逐字更容易阅读。适合两到五行的大标题。

中文没有天然空格，按短语分组。长段落不要按词播放。

只适合很短的词、Logo、数字。中文长句和按钮文字通常不需要。

强调内容正在生成。正文介绍不适合让用户等着逐字打完。

中文乱码容易难看，可以只让英文或数字部分变化。悬停会重新解码。

同一位置的关键词循环替换。长度差异大时，让容器宽度平滑变化。

内容沿垂直方向打开，下面的内容平稳让位。收起后要保留清楚的标题。

浮层要从触发点附近出现，关闭时也回到同一位置。

打开后背景不能继续抢注意力。关闭后焦点回到原按钮。

抽屉从页面边缘滑出，底部面板从屏幕下方升起。适合比弹窗更多的内容，同时保留对原页面的方位感。

选中指示器先到新标签，下面的内容再切换，操作与结果连成一次动作。

‹ ›

要有上一张、下一张和当前位置，不能只靠自动播放。

不中断任务。关键错误不能只闪一下就消失。

数字必须停在准确结果上，动画不能让用户误读数值。

模拟加载

等待很短时直接显示内容，没必要让骨架闪一下。

不知道何时完成时用循环；能计算进度时，就不要一直让人盯着圆圈。

空提交会抖动。成功有对勾和文案。颜色只能辅助表达。

汉堡变成关闭叉号。按钮的位置和点击范围要保持稳定。

点击后图片放大到同一张图的位置，用户能看到自己点的东西去了哪里。

新页面从右侧进入表示继续前进，返回时沿相反方向退出。