CSS属性：transition-timing-function 属性

transition-timing-function 属性是 CSS 中用于指定过渡效果的时间曲线（timing function）的属性。它控制在过渡期间属性值的变化速度，从而影响过渡的动画效果。这个属性可以使用各种预定义的时间曲线函数，也可以使用自定义的贝塞尔曲线。

语法如下：

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

ease：默认值，缓慢开始，然后加速，然后缓慢结束。

linear：匀速过渡，没有缓动效果。

ease-in：缓慢开始，然后快速结束。

ease-out：快速开始，然后缓慢结束。

ease-in-out：缓慢开始和结束，中间阶段加速。

cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，其中 n 是一个介于 0 和 1 之间的数值。

下面是一个简单的例子，演示了如何使用 transition-timing-function：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition-property: width; /* 指定要过渡的属性 */
  transition-duration: 1s;
  transition-timing-function: ease-in-out; /* 使用ease-in-out时间曲线 */
}

.box:hover {
  width: 200px; /* 鼠标悬停时，width属性发生变化，触发过渡效果 */
}

在这个例子中，.box 元素在鼠标悬停时，width 属性从 100px 过渡到 200px，并且过渡效果的时间曲线是 ease-in-out，即在开始和结束时缓慢，中间加速。你可以根据需要选择合适的时间曲线，或者使用自定义的贝塞尔曲线来实现更精细的控制。

转载请注明出处：http://www.zyzy.cn/article/detail/4266/CSS