CSS3 transition-timing-function 属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性定义及使用说明

transition-timing-function 是 CSS3 中用来指定过渡效果的时间函数的属性。它定义了过渡效果在时间上的变化规律，控制了过渡效果的速度曲线，从而影响了元素从开始到结束过渡过程中的动画效果。

该属性的值可以是下列预定义的时间函数之一：

• ease：默认值，缓慢加速，然后缓慢减速的过渡效果。
• linear：匀速过渡效果。
• ease-in：缓慢加速的过渡效果。
• ease-out：缓慢减速的过渡效果。
• ease-in-out：先缓慢加速，再缓慢减速的过渡效果。
• cubic-bezier(n,n,n,n)：自定义的贝塞尔曲线函数，通过四个值来定义曲线的控制点，分别对应 x1、y1、x2、y2。

例如，如果你想让过渡效果具有缓慢加速，然后缓慢减速的效果，可以这样写：

.element {
  transition-timing-function: ease;
<p>}

.element {
  transition-timing-function: linear;
}

你也可以使用自定义的贝塞尔曲线函数来实现更精细的过渡效果。例如：

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

这将创建一个自定义的缓慢加速和缓慢减速的效果。你可以调整四个值来调整曲线的形状，以实现特定的过渡效果。

通过调整 transition-timing-function 属性，你可以控制过渡效果的速度和动画效果，从而使你的界面交互更加生动和吸引人。

语法

更多实例