DevShelf

Appearance

transition-timing-function ​

描述 ​

transition-timing-function CSS 属性设置如何计算受过渡效果影响的 CSS 属性的中间值。

效果展示 ​

语法 ​

css
/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Multiple easing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

值 ​

  • ease 等于默认值 cubic-bezier(0.25, 0.1, 0.25, 1.0) ，速度向过渡中间增加，在结束时减慢。
  • linear 等于 cubic-bezier(0.0, 0.0, 1.0, 1.0) ，以均匀的速度转换。
  • ease-in 等于 cubic-bezier(0.42, 0, 1.0, 1.0) ，缓慢开始，过渡速度逐渐增加直至完成。
  • ease-out 等于 cubic-bezier(0, 0, 0.58, 1.0) ，开始快速过渡，随着过渡的继续而减慢速度。
  • ease-in-out 等于 cubic-bezier(0.42, 0, 0.58, 1.0) ，开始缓慢过渡，加速，然后再次减速。
  • cubic-bezier(p1, p2, p3, p4) 作者定义的三次贝塞尔曲线，其中 p1 和 p3 值必须在 0 到 1 的范围内。
  • steps( n, <jumpterm>) 显示沿过渡的 n 个停靠点的过渡，并以相等的时间长度显示每个停靠点。例如，如果 n 为 5，则有 5 步。过渡是否暂时保持在 0%、20%、40%、60% 和 80%，在 20%、40%、60%、80% 和 100% 上，还是在 0% 和 100% 之间停留 5 次过渡，或进行 5 次停止，包括 0% 和 100% 标记（在 0%、25%、50%、75% 和 100% 上）取决于使用以下哪个跳转术语：
    • jump-start 表示左连续函数，因此第一次跳转发生在转换开始时；
    • jump-end 表示右连续函数，使得最后一次跳转发生在动画结束时；
    • jump-none 两端都没有跳跃。相反，同时保持 0% 标记和 100% 标记，每个标记持续时间的 1/n
    • jump-both 包括 0% 和 100% 标记处的暂停，有效地在过渡时间内添加一个步骤。
    • start 与 jump-start. 相同
    • end 与 jump-end. 相同
  • step-start 等于 steps(1, jump-start)
  • step-end 等于 steps(1, jump-end)