transition-timing-function

transition-timing-function 属性通常用作 transition 简写的一部分，用于定义描述过渡如何在持续时间内进行的函数，从而允许过渡在进行过程中改变速度。

.example {
    transition-timing-function: ease-out;
}

这些时序函数通常称为缓动函数，可以使用预定义的关键字值、步进函数或三次贝塞尔曲线来定义。

允许的预定义关键字值为

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end

对于某些值，除非将过渡持续时间设置为较大的值，否则效果可能不那么明显。

每个预定义的关键字都有一个等效的三次贝塞尔曲线值或等效的步进函数值。例如，以下两个时序函数值将彼此等效

.example {
    transition-timing-function: ease-out;
}

.example-2 {
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

以下两个也是如此

.example {
    transition-timing-function: step-start;
}

.example-2 {
    transition-timing-function: steps(1, start);
}

使用 steps() 和贝塞尔曲线

steps() 函数允许您为时序函数指定间隔。它接受一个或两个参数，用逗号隔开：一个正整数和一个可选的值，可以是 start 或 end。如果未包含第二个参数，它将默认设置为 end。

为了理解步进函数，这里有一个演示，它使用 steps(4, start) 作为左侧框的时序函数，而 steps(4, end) 作为右侧框的时序函数（将鼠标悬停在框上或重新加载框架以查看过渡）。

Check out this Pen!

当指定 start 时，值的变化发生在每个间隔的开始处，而 end 会导致值的变化发生在每个间隔的结束处。

详细了解贝塞尔曲线值超出了本参考的范围，但请查看相关链接部分中的参考资料，以了解演示这些值如何工作的工具。

为了与所有支持的浏览器兼容，需要供应商前缀，标准语法声明最后

.example {
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

IE10（第一个支持 transition-timing-function 的稳定版本 IE）不需要 -ms- 前缀。

相关属性

• transition
• transition-property
• transition-duration
• transition-delay

其他资源

• W3C 上的 transition-timing-function
• MDN 上的 transition-timing-function
• 可视化过渡时序
• cubic-bezier.com 由 Lea Verou 创建
• CSS 三次贝塞尔曲线构建器 由 Rob La Placa 创建
• CSS3 贝塞尔曲线测试器 由 Michael Gotta 创建
• Ceaser 由 Matthew Lein 创建

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
支持	支持	4+	10.5+	10+	2.1+	3.2+