Tailwind的animate-xxx类不支持HTML中直接写cubic-bezier()，因其仅绑定预设动画，不解析运行时贝塞尔值；须在tailwind.config.js中通过theme.extend.keyframes定义关键帧、theme.extend.animation组合timing-function（如cubic-bezier(0.42,0,0.58,1)）生成完整工具类。
为什么直接写 cubic-bezier(0.42, 0, 0.58, 1) 在 animate-xxx 类里没效果
Tailwind 的 animation 工具类（比如 animate-bounce）只负责把预设的 @keyframes 和 animation-timing-function 绑定到元素上，它**不解析或注入自定义贝塞尔值**。你不能在 HTML 里写 class="animate-pulse ease-[cubic-bezier(0.42,0,0.58,1)]" —— 这个 ease-[...] 语法根本不存在，Tailwind v4.0 也不支持运行时解析字符串形式的贝塞尔函数。
正确做法：在 tailwind.config.js 的 theme.extend.animation 和 theme.extend.keyframes 里配对定义
必须把关键帧和缓动函数拆开处理：先用 keyframes 定义动画轨迹，再用 animation 把它和你的贝塞尔曲线组合成一个完整工具类。
-
keyframes只管“动什么”（比如从 0% 到 100% 的 transform 或 opacity 变化） -
animation负责“怎么动”（持续时间、次数、timing-function）——这里才能填cubic-bezier(0.42, 0, 0.58, 1) - 两者必须同名（如都叫
float），Tailwind 才能自动关联
示例配置：
module.exports = {
theme: {
extend: {
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-12px)' }
}
},
animation: {
float: 'float 3s cubic-bezier(0.42, 0, 0.58, 1) infinite'
}
}
}
}
容易漏掉的关键点：HTML 元素上必须同时加触发类 + 播放控制
Tailwind 的 animate-xxx 类只声明动画，不控制播放时机。光写 class="animate-float" 是不够的。
立即学习“前端免费学习笔记（深入）”；
- 必须确保元素有明确的初始状态（比如不透明、无 transform 偏移），否则动画起始帧可能不可见
- 如果动画依赖交互（比如 hover 启动），得手动加
:hover:animate-float或用group-hover:animate-float - 若需暂停/反向/延迟，不能靠改 class 名，得用内联
style="animation-play-state: paused"或额外工具类（如animate-paused需自行扩展） - 注意浏览器兼容性：
cubic-bezier()在所有现代浏览器都支持，但 IE 完全不认 —— 如果项目还需兼容 IE，只能退回到ease-in-out等预设值
性能提醒：复杂贝塞尔本身不卡，但搭配错属性就卡
贝塞尔曲线只是控制速度节奏，真正影响帧率的是你动画的 CSS 属性。
- 安全项：
transform、opacity—— 浏览器会走合成层，GPU 加速，60fps 很稳 - 危险项：
height、width、margin、background-color—— 触发 layout 或 paint，尤其在长列表或高频动画中极易掉帧 - 别为了“更顺滑”强行套复杂贝塞尔到低效属性上；先换属性，再调曲线
真正难的不是写对贝塞尔，而是判断这个动画是否该用 CSS 实现 —— 滚动驱动、条件分支、多元素协同，这时候该切 JS + Web Animations API。
