用::after伪元素画旋转打勾动画的核心是用border-bottom和border-right构成“7”形，再通过transform:rotate(45deg)与scaleX(0→1)协同实现渐进绘制，需配合transform-origin:left bottom及forwards保终态。
怎么用 ::after 伪元素画出旋转的打勾动画
核心不是“画勾”，而是用 border 模拟线段，靠 transform: rotate() 和 scaleX() 控制方向与长度。直接写 content: "✓" 看似简单，但没法做渐进式绘制动画，也不利于颜色/粗细控制。
常见错误是把 ::after 放在 input 或 button 上——它们不支持伪元素（除非是 display: inline-block 且有内容），正确载体是提交后显示的提示容器，比如一个 div.success。
-
position: relative必须加在父容器上，否则::after的绝对定位会脱标 - 用
border-bottom+border-right构成 7 字形基础，再通过transform: rotate(45deg)调整成对角线方向 - 动画关键帧里不要只动
transform，要配合scaleX(0)→scaleX(1)实现“绘制感”
@keyframes 里哪些属性必须一起动，否则动画会跳
只改 transform: rotate() 不会画出勾，必须同步控制“长度显现”。本质是让一条线从无到有、再转向成型。单独 animating rotate 会导致线条原地转圈，而不是从左下往右上“长出来”。
典型错误：写 from { transform: rotate(0); } to { transform: rotate(45deg); } —— 这只是转，不是画。
立即学习“前端免费学习笔记（深入）”；
- 起始态：
transform: scaleX(0) rotate(45deg)（压扁+预旋转） - 中间态（约 50%）：
transform: scaleX(0.5) rotate(45deg)（开始拉长） - 结束态：
transform: scaleX(1) rotate(45deg)（完全展开） - 别忘了加
transform-origin: left bottom，否则旋转中心不对，勾会偏移
为什么用 border 而不用 background 或 SVG
border 方案轻量、无需额外标签或资源，兼容性好（IE9+），且能直接响应 CSS 变量改色/粗细。但前提是得理解它的局限：
-
border是矩形框的边，所以只能靠组合两条边（bottom + right）凑出折线；单条边无法拐弯 - 不能用
border-radius做圆头，得靠clip-path或额外遮罩，增加复杂度 - 如果需要抗锯齿更优或缩放不变形，SVG 是更稳的选择，但体积和维护成本上升
- 移动端要注意
transform触发硬件加速的副作用：可能引发输入框失焦或滚动卡顿，建议加will-change: transform仅在动画期间启用
表单提交后怎么触发这个动画，又不干扰正常流程
别在 submit 事件里直接加 class，容易因页面跳转或刷新中断动画。真实场景中，提交成功是异步反馈，动画应绑定在状态变更之后。
- 监听的是数据层变化，比如
if (response.status === 'success')再给容器加show类 - 动画类里用
animation: drawCheck 0.4s ease-out forwards，forwards保证结束时保持最终样式 - 避免用
display: none隐藏容器——它会让动画无法播放；改用opacity: 0; visibility: hidden;，动画开始前切回visibility: visible - 如果用 React/Vue，注意 class 切换需在 next tick 生效（如
setTimeout(() => el.classList.add('show'), 0)），否则 DOM 还没更新就加动画类，会失效
真正难的不是画出那个勾，而是让它的出现时机、持续时间、结束状态和整个表单生命周期对齐。很多人调好了动画，结果发现提交失败时也闪了一下，或者连点两次就错位——那通常是因为 class 控制逻辑没和请求状态严格绑定。
