动效
四条曲线和一份很短的时长预算。场景在被看到时播放一次，然后停在结果上。
曲线
页面滚动到这里时，每条曲线播放一次。点击播放按钮可再次运行。
- cubic-bezier(0.22, 1, 0.36, 1) · 600ms--ease-out任何进入或移动的元素。
- cubic-bezier(0.34, 1.4, 0.64, 1) · 450ms--ease-spring出现的小元素：标签、气泡、徽标。
- cubic-bezier(0.65, 0, 0.35, 1) · 600ms--ease-in-out已在屏幕上的元素改变形状。
- cubic-bezier(0.32, 0.72, 0, 1) · 500ms--ease-drawer面板和抽屉。
时长
以三秒场景为基准按比例绘制。
- 悬停与按下150ms颜色变化和 0.97 的按下缩放。
- 弹出层200–300ms菜单、提示和分段控件的滑块。
- 场景中的一步250–600ms演示或磁贴场景的每一步。
- 整个场景≤ 3s从第一步到静止帧。
播放
主视觉卡片、产品演示和功能磁贴都遵循同一套规则。
- 1静止样式就是最终帧，关键帧只描述元素从哪里来。
- 2约 70% 可见时稍等片刻再播放一次。相邻元素按阅读顺序依次错开开始。
- 3鼠标悬停或键盘聚焦时，在 160ms 的模糊下重播。还没播完的不要重新开始。
- 4只有真实的等待才循环，例如工作进行中的闪光文字。
- 5只对 transform、opacity 和 filter 做动画。退出比进入更快。
- 6开启减少动态效果时，直接显示最终帧，并隐藏重播控件。