css transition-timing-function如何使用

transition-timing-function用于控制CSS过渡动画的速度曲线，不改变总时长但影响变化节奏。可选值包括ease、linear、ease-in、ease-out和ease-in-out，分别定义不同的加减速模式。通过cubic-bezier(x1, y1, x2, y2)可自定义贝塞尔曲线实现如弹跳等复杂效果。当过渡多个属性时，可分别为每个属性设置不同的timing function，如opacity用linear、transform用ease-out、background-color用ease-in，使动画更精细自然。合理运用能显著提升界面动效的流畅性与表现力。

CSS 的 transition-timing-function 属性用于控制过渡动画的速度曲线，也就是元素在过渡过程中的“快慢节奏”。它不会改变过渡的总时长，而是影响中间过程的变化速率，让动画看起来更自然或更具表现力。

常见的预设速度曲线函数

你可以使用以下内置的关键字来快速定义过渡速度：

• ease：默认值，开始慢，中间快，结束慢。
• linear：匀速运动，从头到尾速度不变。
• ease-in：开始慢，逐渐加速，结束最快。
• ease-out：开始快，逐渐减速，结束最慢。
• ease-in-out：类似 ease，但加速和减速更对称，两端都慢，中间快。

例如，让一个按钮在悬停时缓慢放大并柔和结束：

.button {
  transition: transform 0.4s;
  transition-timing-function: ease-out;
}

.button:hover {
  transform: scale(1.1);
}

使用贝塞尔曲线自定义速度（cubic-bezier）

如果预设函数不够用，可以用 cubic-bezier() 自定义速度曲线。它接受四个参数：cubic-bezier(x1, y1, x2, y2)，代表贝塞尔曲线的两个控制点。

立即学习“前端免费学习笔记（深入）”；

比如，实现一个“弹跳式”进入效果：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

.bounce-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in.visible {
  opacity: 1;
  transform: translateY(0);
}

这个曲线会让元素“冲过头”再回弹一点，产生生动的动效。

结合多个属性分别设置速度

当同时过渡多个属性时，可以为每个属性指定不同的 timing function：

.card {
  transition-property: opacity, transform, background-color;
  transition-duration: 0.3s, 0.6s, 0.4s;
  transition-timing-function: linear, ease-out, ease-in;
}

这样 opacity 匀速变化，transform 柔和结束，背景色缓慢开始。

基本上就这些。合理使用 transition-timing-function 能显著提升界面动效的质感，让交互更细腻。不复杂但容易忽略。

以上就是css transition-timing-function如何使用的详细内容，更多请关注php中文网其它相关文章！