safari中tailwind自定义动画失效，主因是@keyframes未加-webkit-前缀导致整块被忽略，且animation名称大小写、连字符须与theme.animation严格一致，同时需双写标准版与-webkit版并内容完全相同。
你的 Tailwind CSS 自定义动画在 Safari 里失效，大概率不是 @keyframes 写错了，而是 Safari 对 @keyframes 的解析规则更严格——它拒绝识别未显式声明 vendor 前缀的动画名，且对 animation-timing-function 和 transform 组合有隐性限制。
为什么 Safari 完全不触发 animation-name？
Safari（尤其是 iOS 15.4 及更早、macOS Safari ≤ 16）要求 @keyframes 名称必须带 -webkit- 前缀，否则整个动画块被忽略。Tailwind 不会自动重写你 theme.animation 里定义的动画名，也不会为 @keyframes 补前缀——这是 PostCSS 的活，但它只处理属性，不改标识符。
- 错误写法：
@keyframes bounce { ... }→ Safari 直接跳过整块 - 正确写法：
@keyframes bounce { ... } @-webkit-keyframes bounce { ... }（内容完全一致） - 若用 JIT 模式动态生成，必须确保
tailwind.config.js中的theme.animation键名和@keyframes名字严格一致，且两者都加了-webkit-前缀 - 验证方法：在 DevTools 的 Styles 面板里搜
bounce，如果连@keyframes声明都看不到，就是前缀缺失
为什么 animation-timing-function 在 Safari 里卡顿或跳帧？
Safari 对 cubic-bezier() 的采样精度低，尤其当配合 transform: scale() 或 translateZ(0) 时，容易触发合成层降级，导致动画抖动或直接冻结。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 避免用
animation-timing-function: cubic-bezier(.17,.67,.83,.67)这类高精度贝塞尔曲线；换成ease-in-out或linear更稳 - 别在动画中混用
transform: translateX()和left—— Safari 会强制回流，动画掉帧 - 如果用了
will-change: transform，必须配transform: translateZ(0)，否则 Safari 可能不启用硬件加速 - 移动端特别注意：iOS Safari 对 > 60fps 的动画会主动限频，
duration小于100ms的动画大概率被合并或丢帧
为什么自定义动画类加了但没效果？
Tailwind 默认不生成 animate-[name] 类，除非你在 theme.animation 里明确定义，且该定义必须匹配 @keyframes 名——大小写、连字符、空格一个都不能错。
- 检查
tailwind.config.js是否写了：animation: { 'bounce-safari': 'bounce-safari 1s ease-in-out' } - 对应
@keyframes必须是：@keyframes bounce-safari { ... }和@-webkit-keyframes bounce-safari { ... } - 别用任意值语法如
animate-[bounce]—— Safari 下 JIT 编译可能漏掉 vendor 前缀逻辑 - 确保没被 PurgeCSS 清掉：在
purge.options.safelist加上/^animate-/正则
真正容易被忽略的是：Safari 对 animation-fill-mode 的支持不一致，forwards 在某些版本里会失效，导致动画结束后元素“弹回”。要么手动加结束态 class，要么用 opacity: 0 + visibility: hidden 替代。这不是 Tailwind 的锅，是 Safari 渲染引擎的老毛病。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
