原子动效
44淡入 / 淡出
fade-in-fade-out滑入
slide-in缩放入场
scale-in揭示
reveal- 项目 1
- 项目 2
- 项目 3
- 项目 4
交错动画
stagger关键帧
keyframes时长
duration位移
translate3D 倾斜 / 翻转
3d-tilt-flip基于触发源的动画
origin-aware-animation交叉淡入淡出
crossfade形变
morph手风琴 / 折叠
展开内容可通过键盘和辅助技术正常访问。
手风琴 / 折叠
accordion-collapse方向感过渡
direction-aware-transition滚动
滚动揭示
继续
滚动揭示
scroll-reveal滚动
滚动驱动动画
继续
滚动驱动动画
scroll-driven-animation滚动
视差
继续
视差
parallax页面过渡
page-transition悬停效果
hover-effect按压 / 轻触反馈
press-tap-feedback长按确认
hold-to-confirm- 拖动项目 A
- 拖动项目 B
- 拖动项目 C
拖拽排序
drag-to-reorder滑动关闭
swipe-to-dismiss摇晃 / 抖动
shake-wiggle涟漪
ripple缓动
easing弹簧
spring●
循环
loop跑马灯动态界面跑马灯动态界面
跑马灯
marquee环绕
orbit空闲动效
idle-animation模糊
blur调整前
调整后
前后对比滑杆
before-after-slider线条绘制
line-drawing规划构建
文字形变
text-morph骨架屏 / 微光
skeleton-shimmer128
数字滚动
number-ticker让动态清晰可读。
打字机
typewriter帧率（FPS）
frame-rate合成
compositing有目的的动效
purposeful-animation预备动作
anticipation感知性能
perceived-performance减弱动效
reduced-motion