动画时间
速度的快或慢取决于时间与缓动，相同的距离，时间越短速度则越快，而缓动则是能将同一段时间划分快与慢的区域。
在企业级应用的设计中，动效需要在尽可能短的时间内有效的完成过渡。
时间参数
最快时间: 50ms, 基本时间: 200ms, 较大时间：300ms... 50 的倍增方式。
| Token | Value | Usage |
|---|---|---|
--motion-duration-short1 | 50ms | 短暂出现和消失的动画效果，如气泡提示、选项卡切换、图标放大缩小等 |
--motion-duration-short2 | 100ms | 中等速度的动画效果，如列表滑动、页面转场、按钮点击等 |
--motion-duration-short3 | 150ms | 比较明显的动画效果，如进度条填充、图表动画等 |
--motion-duration-short4 | 200ms | 中等速度的动画效果，如列表滑动、页面转场、按钮点击等 |
--motion-duration-medium1 | 250ms | 长一些的动画效果，如进度条填充、图表动画等 |
--motion-duration-medium2 | 300ms | 中等缓慢的动画效果，如图标展开收起、列表滑动等 |
--motion-duration-medium3 | 350ms | 缓慢的动画效果，如菜单展开收起、卡片切换等 |
--motion-duration-medium4 | 400ms | 中等缓慢的动画效果，如模态框弹出、菜单展开收起等 |
--motion-duration-long1 | 450ms | 较长时间的动画效果，如页面切换、图片加载等 |
--motion-duration-long2 | 500ms | 中等缓慢的动画效果，如滚动条滑动、进度条填充等 |
--motion-duration-long3 | 550ms | 长时间的动画效果，如页面切换、图片加载等 |
--motion-duration-long4 | 600ms | 缓慢的动画效果，如菜单展开收起、卡片切换等 |
短时间
通常用于以实用为主的指示型的过渡场景。
| Token | Value | Usage |
|---|---|---|
--motion-duration-short1 | 50ms | 短暂出现和消失的动画效果，如气泡提示、选项卡切换、图标放大缩小等 |
--motion-duration-short2 | 100ms | 中等速度的动画效果，如列表滑动、页面转场、按钮点击等 |
--motion-duration-short3 | 150ms | 比较明显的动画效果，如进度条填充、图表动画等 |
--motion-duration-short4 | 200ms | 中等速度的动画效果，如列表滑动、页面转场、按钮点击等 |
中时间
通常用于差不多超过屏幕中心的过渡场景。
| Token | Value | Usage |
|---|---|---|
--motion-duration-medium1 | 250ms | 长一些的动画效果，如进度条填充、图表动画等 |
--motion-duration-medium2 | 300ms | 中等缓慢的动画效果，如图标展开收起、列表滑动等 |
--motion-duration-medium3 | 350ms | 缓慢的动画效果，如菜单展开收起、卡片切换等 |
--motion-duration-medium4 | 400ms | 中等缓慢的动画效果，如模态框弹出、菜单展开收起等 |
长时间
通常用于强调放松氛围的场景，它们用于相对大型的过渡效果。
| Token | Value | Usage |
|---|---|---|
--motion-duration-long1 | 450ms | 较长时间的动画效果，如页面切换、图片加载等 |
--motion-duration-long2 | 500ms | 中等缓慢的动画效果，如滚动条滑动、进度条填充等 |
--motion-duration-long3 | 550ms | 长时间的动画效果，如页面切换、图片加载等 |
--motion-duration-long4 | 600ms | 缓慢的动画效果，如菜单展开收起、卡片切换等 |