最常被忽略的“静默失效”原因是 animation-name 与 @keyframes 名称不匹配，大小写、连字符/下划线差异均导致动画不触发；需确保声明顺序、打包保留、伪元素初始态、选择器权重及渲染流完整。
animation-name 与 @keyframes 名称不匹配
这是最常被忽略的“静默失效”原因：浏览器不会报错，只当没这回事。比如你写了 @keyframes checkbox-check，但 CSS 中写的是 animation-name: checkboxCheck（大小写不同）或 checkbox-check（连字符 vs 下划线），动画就彻底不触发。
用开发者工具打开目标元素，在「Styles」面板里找 animation-name 值，再点右侧动画图标——如果提示 “No keyframes found”，基本就是这个名字对不上。
-
@keyframes必须在使用它的 CSS 规则之前声明；动态插入样式时，得先注入@keyframes，再注入带animation-name的规则 - 构建工具（如 Vite、Webpack）可能把未显式引用的
@keyframes当作无用代码删掉，检查打包后 CSS 是否还保留该定义
.form-check-input:checked + .form-check-label::after 没触发重绘
Bootstrap 表单复选框的自定义勾选动画，依赖伪元素状态切换来触发动画。但如果你只写了 .form-check-input:checked + .form-check-label::after { animation: checkbox-check 0.3s; }，而没设初始态或 fill-mode，动画很可能一闪而过甚至不可见。
- 必须显式设置
animation-duration（默认是 0s，等于没动） - 加
animation-fill-mode: forwards，否则动画一结束就回退到未选中时的::after样式，看起来像“没播完” - 确保
::after在未选中时有明确的初始状态（比如transform: scale(0)），否则没有变化起点，浏览器不触发重绘
伪元素被 Bootstrap 默认样式压制
Bootstrap 5 的 .form-check-label::before 和 ::after 已有默认规则，比如用于绘制方框轮廓。如果你的自定义动画也作用于 ::after，但选择器权重不够，就会被覆盖。
例如 Bootstrap 写了 .form-check-input:checked + .form-check-label::after { background-color: #0d6efd; }，而你只写 .form-check-label::after { animation: ...; }，那动画属性根本不会生效。
- 必须用相同或更高 specificity 的选择器，比如
.form-check-input:checked + .form-check-label::after - 避免直接覆盖
background-color或border等属性，它们可能干扰transform或opacity动画的渲染层 - 检查「Computed」面板里
animation是否被划掉——被划掉说明被更高权重规则干掉了
input 被隐藏但未保留在渲染流中
自定义复选框普遍用 .form-check-input { position: absolute; opacity: 0; } 隐藏原生控件。但如果误加了 display: none 或父容器用了 visibility: hidden，动画元素就无法进入渲染流程，animation 直接不启动。
- 永远不要用
display: none隐藏.form-check-input——它会破坏可访问性和动画触发条件 - 确保包裹容器（如
.form-check）没有overflow: hidden且裁剪了::after的动画区域 - 如果动画涉及位移（如
transform: translateX），要确认父级没设transform或will-change导致合成层隔离异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
