在上下文里看动效
每条配方都用真实界面片段展示，先让用户建立视觉记忆。
产品界面
它先像一本文雅的参考库，再像一个小型工具。
浏览、调参、复制和审查建议共享同一套标签、间距和视觉节奏。
把感觉变成参数
时长、延迟、位移和缓动始终与预览放在一起。
导出 prompt 和代码
同一条配方可以服务表达需求的人，也可以服务实现需求的 agent。
全量词典
91 个动效词条已经进入同一套可视化工作区。
交互式词条
目录、预览、参数和导出在一个工作区里。
这是产品的核心页面：左侧用于定位动效，中间查看行为，右侧把参数变成代码和 prompt。
当前词条
滑入
滑入用于让用户理解新内容如何出现或离开界面。
滑入是「入场与退场」中的核心词条，用来让用户理解新内容如何出现或离开界面。
浏览分类420ms
28px
0ms
soft
.motion-card {
animation-name: motion-slide-in;
animation-duration: 420ms;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-delay: 0ms;
animation-fill-mode: both;
will-change: transform, opacity;
transform-origin: center;
}
@keyframes motion-slide-in {
from {
opacity: 0;
transform: translateY(28px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.motion-card {
animation-name: motion-slide-in-reduced;
animation-duration: 180ms;
animation-delay: 0ms;
transform: none;
animation-iteration-count: 1;
}
}
@keyframes motion-slide-in-reduced {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Agent Prompt
为界面片段使用「滑入」动效。围绕 滑入用于让用户理解新内容如何出现或离开界面。 设计 preview，动画 transform 与 opacity，时长 420ms，幅度 28px，延迟 0ms，曲线使用 柔和（cubic-bezier(0.23, 1, 0.32, 1)），并包含 reduced-motion fallback。
intent: entrancefeel: softcontext: card
- 需要让用户理解新内容如何出现或离开界面时使用。
- 适合低频或中频界面变化，保持短、清楚、可打断。
- 复制 prompt 或 CSS 后，可交给 agent 直接实现。
- 在卡片、列表项或轻量面板里预览 滑入。
- 调节时长、位移、延迟和曲线，得到适合当前界面的 滑入。
- 优先动画 transform 和 opacity，避免 layout 与 paint 抖动。
- UI 动效保持在 300ms 内，频繁出现的反馈要更短。
- 避免 scale(0) 和 UI ease-in，使用有物理感的起点和强缓出曲线。
滑入 在减少动态时移除位移、旋转或循环，只保留短淡入和状态对比。