如何使用CSS制作符合Material Design规范的过渡动画？-css教程-PHP中文网

material design 规范要求 transition-property 仅设 background-color、color、border-color、transform、opacity 和 box-shadow，禁用 width/height/top/left 等触发重排的属性，并必须搭配 cubic-bezier(0.0,0.0,0.2,1) 缓动函数。

如何使用css制作符合material design规范的过渡动画？

transition-property 该设哪些属性才符合 Material Design 规范

Material Design 官方推荐的过渡动画只作用于特定属性，不是所有 CSS 属性都适合加 transition。乱设会导致动画卡顿、视觉不一致，甚至破坏组件语义。

MCW（material-components-web）明确限定以下属性为“可过渡”核心集：

background-color、color、border-color —— 用于按钮、卡片、输入框等状态色变化
transform（仅限 scale、translate、rotate）—— 波纹（mdc-line-ripple）、FAB 悬浮按钮展开等依赖此
opacity —— 用于淡入淡出，如菜单遮罩层、提示框显示/隐藏
box-shadow —— 仅限 mdc-elevation 系统中定义的预设层级值（如 elevation-2 → elevation-6）

⚠️ 避免对 width、height、top/left（非 transform 位移）、font-size 等触发重排（reflow）的属性加 transition —— MCW 所有官方组件动画都绕开这些。

timing-function 必须用 $deceleration-curve-timing-function 吗

是的，只要想严格符合 Material Design 规范，就必须用 MCW 提供的标准缓动函数：$deceleration-curve-timing-function（即 cubic-bezier(0.0, 0.0, 0.2, 1)），而不是 ease 或 ease-in-out。

这个贝塞尔曲线专为“减速结束”设计，模拟物理惯性，让动画收尾干净利落 —— 这是 Material 动画语言的标志性特征。MCW 的所有内置动画（如 mdc-line-ripple、mdc-button ripple）都基于它。

实际写法示例：

button {
  transition: background-color 0.2s <code>cubic-bezier(0.0, 0.0, 0.2, 1)</code>,
              transform 0.2s <code>cubic-bezier(0.0, 0.0, 0.2, 1)</code>;
}

注意：不要写成 transition-timing-function: ease 单独声明 —— 多属性 transition 时，timing-function 必须与 property 显式配对，否则会 fallback 到浏览器默认。