直接对 checkbox input 使用 transition 无效，因其不参与渲染；动画应作用于 label::after 等可见元素，用 transform: translateX() 实现平滑滑块位移，并确保交互热区足够、选择器路径正确。
为什么直接用 transition 在 input[type="checkbox"] 上无效
因为 <input> 元素本身不可见、不渲染样式，对它加 transition 没有任何视觉效果。真正要动的是你用 ::after 伪元素模拟的滑块（toggle knob），或者包裹它的 label 内的自定义容器。
常见错误是写成这样：input:checked { transition: all 0.3s; } —— 完全没用，浏览器根本不会触发重绘。
- 动画必须作用在「实际参与渲染」的元素上，比如
label::after或一个显式添加的<span class="toggle"></span> -
:checked只是状态钩子，用来切换其他元素的样式，它自己不承载动画 - 确保目标元素有可过渡的属性：如
transform、background-color、left（需设position）
用 transform: translateX() 实现最稳的滑块位移动画
比起用 left + position: absolute，transform 触发硬件加速、无重排、动画更顺滑，且兼容性好（IE10+）。
典型结构是：label 包裹 input 和一个伪元素（或空 span），通过 :checked 控制伪元素的 transform 偏移：
立即学习“前端免费学习笔记（深入）”；
label .toggle {
display: inline-block;
width: 44px;
height: 24px;
background: #ccc;
border-radius: 12px;
position: relative;
transition: background 0.2s;
}
<p>label .toggle::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}</p><p>input:checked + .toggle::after {
transform: translateX(20px);
}</p><p>input:checked + .toggle {
background: #4CAF50;
}-
translateX(20px)的值 = 轨道宽度 − 滑块宽度 =44 - 20 = 24，但实际取20是为留出左右 2px 边距，让滑块始终在轨道内 -
cubic-bezier(0.4, 0, 0.2, 1)是 Material Design 推荐的“减速进+加速出”曲线，比ease-in-out更自然 - 务必给
.toggle::after设position: absolute，否则transform会相对文档流偏移，导致跳动
用 :checked ~ 连接器绕过 DOM 顺序限制
如果开关结构是 input 在 label 外（例如为了语义化或框架约束），无法用 input:checked + .toggle，就得靠兄弟选择器 ~ 或 JS 绑定。纯 CSS 下，推荐把 input 放在最前，用 :checked ~ .toggle：
<input type="checkbox" id="switch"> <label for="switch"></label> <span class="toggle"></span>
然后写：
input#switch:checked ~ .toggle::after {
transform: translateX(20px);
}-
~是通用兄弟选择器，不要求紧邻，只要同级且在:checked后面即可 - 注意：不能跨父容器，
input和.toggle必须在同一层 DOM 下 - 若必须保持
input在label内，又想外部控制样式，只能用 JS 监听change并切类名，CSS 不再能纯靠伪类驱动
移动端点击区域小、响应迟钝？补上 touch-action 和 cursor
默认 label 点击区只覆盖文字，滑块区域没交互反馈；iOS 上还可能因 300ms 延迟导致动画卡顿一帧。
- 给
label或.toggle加cursor: pointer，明确提示可点 - 加
touch-action: manipulation，禁用双击缩放，消除 iOS 300ms 延迟 - 确保点击热区 ≥ 44×44px（苹果人机指南），可用
padding扩展label，但别影响::after定位逻辑 - 避免在
::after上设pointer-events: none——这会让滑块本身不可点，只能点 label 文字
动画本身没问题，问题常出在交互链路断掉：用户点了，但没触发 :checked，或者触发了却没更新到目标元素。检查 DOM 结构和选择器路径比调 transition-timing-function 更重要。
