博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》CSS transition timing写错动画乱跳目录昨天改个按钮悬停效果点一下直接闪现到目标位置。调试到凌晨三点才意识到transition的timing写错了。报错现象.btn悬停时width和background-color瞬间变化没半点过渡。像被狗追着跑不是动画是跳帧。核心根源timing function 写成无效值。比如easein少个连字符而不是ease-in。浏览器解析失败直接忽略整个transition声明。结果属性变化时元素直接跳变。错误代码 vs 正确代码/* 错timing写错浏览器直接丢弃transition */.btn{transition:all0.5seasein;/* 无效easein 没连字符 */}/* 对timing写对动画顺滑 */.btn{transition:all0.5sease-in;/* 有效ease-in 有连字符 */}为什么跳CSS 规范规定无效的 timing function 会导致 transition 被完全忽略。浏览器不报错但动画直接跳。实测easein时悬停属性变化瞬间生效ease-in时动画流畅过渡。避坑总结timing function 必须带连字符ease-in✅ /easein❌ease-out✅ /easeout❌别偷懒连字符是命根子。别信浏览器默认值写transition: all 0.5s;时浏览器用默认ease。但ease本身是缓动不会跳。跳的原因永远是timing 写错导致 transition 被丢弃。检查工具用起来Chrome DevTools → Elements → Styles → 展开transition。如果显示transition: none就是 timing 写错了。手滑是常态我昨天复制代码漏了-。调试时骂了句“艹”才想起来这坑。别学我写完多扫一眼。一句话收尾transition 的 timing function写对了才叫动画写错了就是跳变。别让连字符毁了你的体验。代码写完记得 CtrlS 保存别等崩溃了再后悔