纯 html + css 可实现轻量可复用的支付成功对勾动画，需用 @keyframes 配合 animation 触发并显式设置 animation-fill-mode: forwards 以保持终态；推荐 clip-path + 内联 svg 方案，避免 stroke-dasharray 计算不准问题，兼容 chrome 57+、firefox 54+、safari 15.4+；js 仅用于切换 class 触发动画，不直接操作样式，防止卡顿或重叠。
纯 HTML + CSS 就能做出轻量、可复用的支付成功对勾动画，不需要 JS 控制生命周期，但必须用 @keyframes 配合 animation 触发；如果加了 JS 交互（比如点击后播放），反而容易因重复触发或状态残留导致动画卡住或不重播。
用 clip-path + @keyframes 实现对勾绘制动画
这是目前最简洁、兼容性足够（Chrome 57+、Firefox 54+、Safari 15.4+）且无依赖的方案。核心是把对勾画在 SVG 或伪元素里，再用 clip-path 从左下到右上逐步“裁出”线条。
常见错误现象：stroke-dasharray + stroke-dashoffset 在非内联 SVG 中常失效，因为外部引用或 CSS 注入时路径长度计算不准；而 clip-path 直接作用于元素盒模型，更可控。
- 把对勾写成一个
::after伪元素，content: "✓"最简但字体渲染不一致，推荐用 SVG 内联路径 - 给该伪元素设固定宽高和
overflow: hidden，再用clip-path: inset(50% 50% 50% 50%)初始遮住全部 - 动画中逐步缩小
inset()的 top 和 left 值，例如从inset(50% 50% 50% 50%)→inset(0 50% 50% 0)→inset(0) - 注意 Safari 对
inset()动画支持较晚，iOS 15.4+ 才稳定，旧版本需降级为transform: scale(0)+opacity
animation-fill-mode: forwards 必须显式设置
否则动画播完立刻回退到初始态，对勾闪一下就消失。这不是 bug，是 CSS 动画默认行为。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
使用场景：用户完成支付跳转到结果页，需要保持对勾可见至少 2 秒以上，同时允许后续 JS 触发下一步（如跳转订单页）。
- 只加
animation: check-anim 0.6s ease-out不够，必须补上animation-fill-mode: forwards - 如果同时用了
animation-delay（比如等加载图标收起后再播），forwards依然生效，不会因延迟而丢失终态 - 别用
animation-direction: alternate，会导致对勾画一半又倒回去，观感极差
如何让动画响应 JS 状态（比如支付接口返回 success 后才播放）
关键不是“用 JS 播放动画”，而是“用 JS 切换 class 触发动画”，避免直接操作 style.animation 引发重排或竞态。
性能影响：频繁增删 class 是低成本操作；直接改 style 属性会强制同步计算样式，尤其在低端安卓 WebView 中易卡顿。
- HTML 元素初始带
class="check-icon"，但不带play类 - CSS 定义：
.check-icon.play { animation: check-anim 0.6s ease-out forwards; } - JS 中仅执行
iconEl.classList.add('play')—— 这一行就足够，无需清空、无需监听动画结束（除非要链式操作） - 如果用户反复点击“重试支付”，要防止多次 add 导致动画重叠，可在 add 前先
remove('play')再 add
真正容易被忽略的是：动画时间与业务逻辑节奏要对齐。比如接口返回 success 后立刻 add class，但此时页面可能还在 fade-out 上个 loading 组件，视觉上就变成对勾“破屏而出”。更稳妥的做法是监听上一个动画的 transitionend，再触发对勾动画 —— 这个衔接点，90% 的实战案例都漏掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
