6 变换与动画

【强制】 使用 transition 定义属性时应遵循以下顺序：

  1. [ transition-property ]：检索或设置对象中的参与过渡的属性；
  2. [ transition-duration ]：检索或设置对象过渡的持续时间；
  3. [ transition-timing-function ]：检索或设置对象中过渡的动画类型；
  4. [ transition-delay ]：检索或设置对象延迟过渡的时间；

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

如果顺序错乱，在某些安卓浏览器上会让动画失效。

示例：

  1. /* Not so great */
  2. .selector {
  3.     transition: color .2s 0 ease-in;
  4. }
  6. /* Better */
  7. .selector {
  8.     transition: color .2s ease-in 0;
  9. }

【建议】 尽可能在浏览器能高效实现的属性上添加过渡和动画：

在可能的情况下应选择这样四种变换：

  • transform: translate(npx, npx);
  • transform: scale(n);
  • transform: rotate(ndeg);
  • opacity: 0..1;

详见 High Performance Animations

[⬆]