当元素在位置或状态之间变化时，整体的运动感应该是迅捷的、无需等待的，但也不宜过快，也要适度缓和，让用户能够理解转场效果。一些频繁出现的动画效果要保持简短明快。
Do.
迅速完成动画效果，用户无需去等待动画完成。
Don't.
动画不宜过于缓慢，造成不必要的延迟感。
Google ©
Google ©
Material Design 中的动效是自然且响应的。在动画中按照这些设计模式去设置持续时间和缓动，能够打造流畅、一致的动画效果。
当元素在位置或状态之间变化时，整体的运动感应该是迅捷的、无需等待的，但也不宜过快，也要适度缓和，让用户能够理解转场效果。一些频繁出现的动画效果要保持简短明快。
迅速完成动画效果，用户无需去等待动画完成。
动画不宜过于缓慢，造成不必要的延迟感。
根据元素的位移距离、元素的速率、材质面(Surface)的不同等因素，适当的调整动画持续时间，而不是所有动画全部使用一样的持续时间。
退场的对象 应该动画时间更短，因为既然已经退场，就无需被用户高度关注。
当对象需要长距离位移，或材质面(Surface)区域大幅改变时(可以理解成界面元素成块成块大面积变化)，动画的持续时间要长一些。
当对象需要短距离位移，或材质面(Surface)区域小幅改变时(可以理解成界面元素成块成块小幅度变化)，动画的持续时间可以适当短一些，这样动画显得不缓慢。
移动端的转场动画时间一般大于 300ms，当然有些情况下，可以酌情改变：
而动转场画效果超过 400ms 会让人感到缓慢。
相同时间内，相对于小屏，对象在大屏上的位移距离更大，因此速率会更高。所以大屏上的动画需要更长的持续时间，以避免动画过快。
平板设备上动画的持续时间要比手机端设备的持续时间多 30%。例如，手机端 300ms 的动画，移动端要增加到 390ms
可穿戴设备上的动画要比手机端设备的持续时间少 30%。例如，手机端 300ms 的动画，可穿戴设备上要减少到 210ms。
因为在更大的屏幕上，Material 元素需要更长的位移距离，因此相对于小屏幕设备，大屏幕设备需要略长的持续时间来缓和动画。
和移动端动画相比，桌面端的转场动画需要更快更简约。动画时间应该在 150ms 和 200ms 之间。
因为桌面端的转场效果相对不需要那么明显，要比移动端效果更灵敏、更迅捷。
复杂的网页动画会导致丢帧(除非使用了 GPU 加速). 更短的持续时间让转场变的不那么显眼，减少动画对用户注意力的影响，因为动画会快速完成。
桌面端的转场显得更快一些。
这些自然的动画曲线可以调节对象的速度、不透明度和比例。
在动画过程中，加速和减速的变化应该是平滑的，这样的动画才会不机械。
当动画的加速和减速不对称时，动画会显得更自然，更具有愉悦感。
在不同的平台和软件中，缓动曲线的命名各不相同。而这份规范文档将缓动曲线分为标准曲线，减速曲线，加速曲线和 Sharp曲线
这是最为常见的缓动曲线。处于屏幕中的对象快速加速，缓慢减速。除了应用到其他属性的改变上，值得一提的是，这个曲线一般应用于材质面(Surface)的缩放动画。
更多可见 屏幕范围内的运动.
平台 | 协议 |
Android | FastOutSlowInInterpolator |
iOS | [[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f] |
CSS | cubic-bezier(0.4, 0.0, 0.2, 1); |
After Effects | Outgoing Velocity: 40% |
对象从屏幕外向屏幕内运动，在入场时速率达到最大，然后缓慢减速到指定位置。
在减速过程中，对象可能会扩大尺寸（到100%），或增大不透明度（到100%）。在一些案例中，对象入场时不透明度为 0%，而比例会轻微的从大尺寸收缩到 100% 尺寸。
更多可见 屏幕范围的入场和退场.
平台 | 协议 |
Android | LinearOutSlowInInterpolator |
iOS | [[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f] |
CSS | cubic-bezier(0.0, 0.0, 0.2, 1); |
After Effects | Outgoing Velocity: 0% |
对象退场离开屏幕时速率达到最大。而且离开屏幕前，对象不减速。
对象在动画开始时加速，伴随着尺寸的缩小(到0%)和不透明度的减少(到0%)。在某些案例中，对象退场时不透明度为0，而尺寸会轻微的缩小或扩大。
更多可见 屏幕范围的入场和退场.
平台 | 协议 |
Android | FastOutLinearInInterpolator |
iOS | [CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f] |
CSS | cubic-bezier(0.4, 0.0, 1, 1); |
After Effects | Outgoing Velocity: 40% |
Sharp 曲线一般用于退场后还有可能入场的对象。
对象在屏幕内快速加速，然后快速减速（加速减速的曲线对称且相同）到屏幕外。而 Sharp 曲线的减速比标准曲线的减速快。退场的对象可以在任何时候返回并入场。
更多可见 屏幕范围的入场和退场.
平台 | 协议 |
Android | - |
iOS | - |
CSS | cubic-bezier(0.4, 0.0, 0.6, 1); |
After Effects | Outgoing Velocity: 40% |