:checked伪类动画失效的最常见原因是dom结构不合规，必须确保input与目标元素同级且位于其前，仅能通过+或~选择器向后影响兄弟元素；隐藏控件禁用display:none，应使用position:absolute+opacity:0组合。
纯CSS能实现复选框选中动画，但必须满足结构和选择器硬约束——否则动画根本不会触发。
为什么 :checked 伪类没反应？
最常见原因是 DOM 结构不合规：:checked 只能通过 +（相邻兄弟）或 ~（后续兄弟）选择器影响它后面的同级元素。如果动画目标不在 input 后面、或两者不在同一父容器下，样式就完全失效。
-
<input type="checkbox" id="toggle"><div class="box"></div>✅ 正确：同级、input在前 -
<div class="box"><input type="checkbox" id="toggle"></div>❌ 失效：目标在input前面，CSS 无法向上选择 -
<div><input id="toggle"></div> <div class="box"></div>❌ 失效：跨父级，~不匹配嵌套层级 - 检查浏览器开发者工具里
:checked是否被正确应用到input元素上——若没勾选，自然不会触发后续规则
怎么隐藏原生 checkbox 又不破坏状态？
用 display: none 会彻底移除可访问性支持，visibility: hidden 可能拦截点击；稳妥做法是视觉隐藏但保留功能：
- 推荐写法：
.hidden-checkbox { position: absolute; opacity: 0; pointer-events: none; } - 避免
appearance: none单独使用——Safari 旧版本兼容性差，必须配合opacity: 0或clip才稳 - 务必保留
<label for="xxx"></label>或将input包在<label></label>内，确保点击区域有效
哪些 CSS 属性能做平滑过渡动画？
只有可计算、可插值的属性才能加 transition。别试图给 display 或 visibility 加过渡——它们不支持。
- 安全组合：
transform（缩放/位移/旋转）、opacity、background-color、border-color - 对勾动画常用伪元素：
label::after初始设transform: scaleX(0) rotate(45deg)，:checked + label::after改为scaleX(1) - 过渡要明确属性：
transition: transform 0.25s ease, opacity 0.2s linear比transition: all 0.3s更可控、更少卡顿 - 移动端注意加
touch-action: manipulation到label，避免 iOS Safari 点击延迟
遇到抖动、变灰、滑入等效果，结构怎么搭？
不同效果本质是目标元素不同，但 HTML 骨架一致：input → 触发源，label → 容器/代理，动画元素 → label 内部或兄弟节点。
- 图片变灰：
input:checked + label img { opacity: 0.4; transition: opacity 0.2s; } - 滑入提示框：
input:checked ~ .hint { transform: translateY(0); opacity: 1; }，前提是.hint和input同级且在后 - 抖动反馈（需 JS 辅助触发）：
input未勾选时手动加shake-animationclass，靠@keyframes shake驱动，纯 CSS 无法监听“未勾选”状态
真正容易被忽略的是：所有动画都依赖于用户操作是否真实改变了 input 的 checked 状态。如果用 JS 强行修改 el.checked = true 但没触发 change 事件，某些旧版 WebView 下 :checked 伪类可能不会重绘——这种边界情况，测试时得真机点一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
