纯 css 能实现选中动效，但需避开 display: none 和跨层结构；:checked 只影响同级后继元素，input 必须与 label 同级且在前，隐藏用 opacity: 0 等替代 display: none，伪元素动画优先用 transform/opacity 过渡，并注意移动端兼容性与渲染优化。
纯 CSS 能做出选中动效，但必须绕开 display: none 和跨层结构这两个致命坑。
为什么 :checked + ::after 动画不触发
常见现象：写了 input[type="checkbox"]:checked + label::after 却没动画，点击后样式也不变。根本原因是：:checked 只能影响它**后面的同级元素**，且原生 input 必须可被状态捕获——display: none 会直接切断状态链。
- 别用
display: none隐藏复选框，改用opacity: 0; position: absolute; pointer-events: none; -
input和目标label必须同级、且input在前，例如：<input><label></label>，不能是<label><input></label>或嵌套在不同父容器里 - 如果想对
input的父元素做动画（比如整个卡片翻转），CSS 无解，必须换 JS 监听change事件
::before / ::after 做勾选标记的动效写法
核心思路是：用伪元素画一个“未选中态”，再用 :checked 控制它的 transform 和 opacity 过渡，避免依赖 display 切换。
- 初始状态设为
transform: scaleX(0); opacity: 0;，并加transition: transform .2s cubic-bezier(.2, .7, .4, 1), opacity .15s ease - 选中时设
transform: scaleX(1) rotate(45deg); opacity: 1;，这样能模拟对勾“画出来”的效果 - 若用 SVG data URI 当背景图，记得把
background-size设为固定值（如100% 100%），否则缩放时可能失真 - 别只写
transition: all .3s，容易卡顿；明确列出属性更稳
移动端点击没反应或延迟？补这三行 CSS
部分安卓 WebView 和 iOS Safari 对 label 包裹的 checkbox 点击识别率低，尤其动画区域较大时。
- 给触发用的
label加：user-select: none; - 加：
-webkit-tap-highlight-color: transparent; - 如果动画容器宽高较大（比如整块卡片），加：
touch-action: manipulation;
动画卡顿或闪跳？检查这些兼容性细节
不是所有浏览器都平滑支持 transform + opacity 同时过渡，尤其旧版 Safari 和某些安卓内核。
- 避免在
::after里用width/height动画，优先用transform: scale() - 加
will-change: transform, opacity;提前提示渲染引擎，但别滥用（只加在真正需要动画的元素上） - Safari 15.4 之前不支持
scaleX(0)的 transition，可用clip-path: inset(0 100% 0 0)替代隐藏 - 如果用了
@keyframes，确保动画名和调用名完全一致（大小写敏感），且forwards填充模式要显式声明
真正难的不是写出动画，而是让 :checked 状态稳定、伪元素渲染不抖、移动端点击不飘——这些细节一漏，动效就变成 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
