CSS动画在:hover中不生效，是因为必须在默认状态预先定义animation（如none），否则浏览器跳过动画启动；正确做法是默认设animation: none，hover时覆盖为具体动画，或用animation-play-state控制启停。
CSS动画写在 :hover 里不生效，通常是因为动画属性（如 animation）只在悬停时声明，而元素默认状态未定义动画相关基础属性，导致浏览器无法正确触发或过渡动画。关键解决方式是：**必须在元素的默认（非 hover）状态中预先定义 animation，哪怕只是设为 none 或一个空动画**。
浏览器对 CSS 动画的触发有隐式要求：若元素初始状态完全没声明 animation（包括 animation-name、animation-duration 等），仅在 :hover 中设置，部分浏览器（尤其是 Chrome 新版本）会跳过动画启动逻辑，直接应用最终样式，造成“无动画”假象。这并非 bug，而是规范中对动画可动画性（animatable）和初始状态一致性的要求。
即使你只想在 hover 时播放一次动画，也要在默认状态中“占位”声明 animation。常用做法：
animation: none; 或 animation: initial;
animation: slideIn 0.3s ease;
animation-play-state 控制启停（更可靠）比反复切换 animation 值更稳定的方式是固定定义动画，仅控制播放状态：
立即学习“前端免费学习笔记（深入）”；
animation: slideIn 0.3s ease; animation-play-state: paused;
animation-play-state: running;
如果仍不生效，顺手排查以下常见问题：
@keyframes 名称拼写与 animation-name 完全一致（区分大小写）display（如 display: none ↔ block），这会中断动画生命周期以上就是css动画写在hover里不生效怎么办_应在默认状态定义animation的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
568
收藏
取消收藏
