motion-recipeslisted
Install: claude install-skill yang20040317-svg/design-workflow
# Motion Recipes（动效配方）
> 来源：Emil Kowalski `animate/RECIPES.md`。常见组件直接从此取实现，别从空白重建。曲线用 `motion-foundations` 里的 `--ease-out` / `--ease-in-out` / `--ease-drawer` token。
## Button press
```css
.button {
transition: transform 160ms var(--ease-out);
}
.button:active {
transform: scale(0.97);
}
```
`scale()` 也会缩放子元素（文字、图标一起动），正是「物理按下」的阅读感。`:active` 是触摸上的真实按下，无需 hover 闸门；`:hover` 样式单独闸。
## Dropdown / popover / menu / select
从触发源「长」出来，不是凭空。
```css
.popover {
transform-origin: var(--transform-origin); /* Base UI 提供 */
transition:
opacity 200ms var(--ease-out),
transform 200ms var(--ease-out);
}
.popover[data-starting-style],
.popover[data-ending-style] {
opacity: 0;
transform: scale(0.95);
}
```
`transform-origin` 是灵魂——面板应看起来像从你点的那个东西里冒出来。
## Tooltip
同 popover 形状，更快，且带多数实现会漏的细节：
```css
.tooltip {
transform-origin: var(--transform-origin);
transition:
transform 125ms var(--ease-out),
opacity 125ms var(--ease-out);
}
.tooltip[data-starting-style],
.tooltip[data-ending-style] {
opacity: 0;
transform: scale(0.97);
}
.tooltip[data-instant] { transition-duration: 0ms; } /* 一个开后，邻居即时开 */
```
首次延迟防误触；之后跳过延迟和动画让整条工具栏更跟手。
## Modal（唯一居中的 popover）
```css
.modal {
transform-origin: center; /* 例外：不锚定触发源 */
transition:
opacity 250ms var(--ease-out),
transform 250ms var(--ease-out);
}
.modal[data-starting-style],
.modal[data-ending-style] {
opacity: 0;
transform: scale(0.96);
}
.backdrop { transition: opacity 250ms var(--ease-out); }
``