← 返回 Web 词条

动效时长

Web原生支持

在 Web 上叫transition-duration

CSS: transition-duration

一个动画从开始到结束要花多久,时间长短决定它是一闪而过还是看得清。

  • 动画太快了
  • 等它动完好久
  • 一闪就过去了
  • 动效时长
  • 过渡时长
  • 动画持续时间

示例

Webtransition-duration原生支持四条轨道曲线相同,只有时长不同
0.4s 很快
1s
2s
4s 很慢

同时出发,各自用的时间不同 —— 越慢的越晚到,差的就是这段时间。

其他平台的相似实现

iOS原生支持
duration异名

不是独立属性,而是各种动画类型的参数:linear(duration:) 的官方描述是「在指定时长内以恒定速度移动的动画」。

看 iOS 视角 →
Android原生支持
durationMillis异名

官方原文:tween 在指定的 durationMillis 内用缓动曲线在起止值之间做动画。

看 Android 视角 →

跨端框架实现

使用规范

什么时候用

  • 需要让状态变化被看清时
  • 需要与平台既有节奏保持一致时

什么时候别用

  • 长到挡住操作时
  • 用在基于物理的动画上时——那类动画不由固定时长驱动

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →