Tailwind CSS中如何自定义CSS过渡缓动曲线？-css教程-PHP中文网

tailwind 中需在 theme.extend.transitiontimingfunction 配置自定义缓动函数，如 'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)'，类名自动转为 ease-spring；必须与 duration-、transition- 共存才生效，且需配合 motion-reduce 变体支持系统动画偏好。

tailwind css中如何自定义css过渡缓动曲线？

tailwind.config.js 里配 `transitionTimingFunction`

Tailwind 默认只提供 ease-in-out、ease-in 等四个基础缓动类，想用自定义贝塞尔曲线（比如 cubic-bezier(0.34, 1.56, 0.64, 1)）或 spring 物理动效，必须在配置文件中扩展 theme.transitionTimingFunction。

直接往 extend 下加就行，不需要重写整个默认列表：

module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        'in-expo': 'cubic-bezier(0.95, 0.05, 0.79, 0.01)',
      }
    }
  }
}

配完记得重启 dev server，否则新类名不生效。

类名会自动转成 ease-spring、ease-in-expo 这种格式，不能手动改前缀
别在 plugins 或 variants 里折腾这个——v3.0+ 后它只认 theme.transitionTimingFunction
如果配了但类没生成，检查是否漏了 extend，写在顶层 theme.timingFunction 是无效的

`ease-` 类必须和 `duration-`、`transition-` 共存才起作用

缓动函数类（如 ease-spring）本身不带任何 CSS 声明，它只负责设置 transition-timing-function。单独加在元素上完全没效果。

必须和过渡属性、时长一起用，且三者都得在「常态」类里声明：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="transition-transform duration-500 ease-spring hover:scale-110">
  hover 时缩放才走 spring 曲线
</div>

hover:ease-spring 是错的——移出时会跳回，因为离开态没定义缓动
duration-500 和 ease-spring 必须同级写在基础类中，不能只挂在 hover: 后面
如果用了 transition-all，ease-spring 会应用到所有被过渡的属性上；想局部控制，就拆成 transition-transform + transition-opacity 分开配

移动端或偏好减少动画时，`motion-reduce` 会覆盖你配的 `ease-` 类

用户开启系统“减少动画”后，motion-reduce 变体会强制禁用过渡，哪怕你写了 ease-spring 也没用。

这不是 bug，是预期行为。如果你希望某些关键反馈（比如按钮点击）仍保留轻微动效，得显式覆盖：

<button class="transition-transform duration-200 ease-spring motion-reduce:duration-75 motion-reduce:ease-linear">
  提交
</button>

motion-reduce 默认关闭，需在 tailwind.config.js 的 variants 中启用：transitionTimingFunction: ['responsive', 'motion-reduce']
它不会自动 fallback 到 ease-linear，必须手动指定降级方案
别指望 motion-reduce:ease-none——CSS 没这个值，要用 motion-reduce:transition-none 或极短时长