用 steps() 而不是 ease-in-out 是因为雪碧图需精准逐帧跳变，ease-in-out 会导致模糊拖影；steps(12, end) 将动画均分12步，每步结束立刻跳到下一帧，确保清晰帧动画。
为什么用 steps() 而不是 ease-in-out 做爱心动画
因为雪碧图（sprite）是静态帧拼合的单张图片，要让背景位置精准跳变到每一帧，必须切断过渡插值——ease-in-out 会平滑滚动背景，导致中间出现模糊、错位或“拖影”；而 steps(12, end) 表示把整个动画时长均分为 12 步，每步结束时立刻跳到下一帧背景位置，视觉上就是逐帧播放。
常见错误现象：background-position 动画看起来卡顿、帧数对不上、最后停在中间某帧不还原。
-
steps()第二个参数必须是end（不是start），否则第一帧会闪一下再开始 - 帧数必须和雪碧图实际列数/行数一致；比如 4×3 的网格共 12 帧，就写
steps(12, end) - 动画时长建议设为
0.6s左右，太快人眼难识别，太慢失去点击反馈感
雪碧图尺寸与 background-size 怎么配才不偏移
假设爱心雪碧图是横向排列的 12 帧，每帧 24×24px，整图宽 288px、高 24px。这时 background-size 必须显式设为 288px 24px，否则浏览器按默认缩放规则拉伸，background-position 计算就会错乱。
使用场景：图标小、需高频复用、兼容老浏览器（比 SVG 动画更稳）。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
background-size: contain或cover，它们会破坏帧定位精度 -
background-position动画起始值应为0 0，结束值为-264px 0（即移动 11 帧宽度：11 × 24px） - 如果雪碧图是纵向排列，结束值应为
0 -264px，且background-size高度要对应总高度
@keyframes 里写 background-position 的坑
直接写 background-position: -264px 0 看似合理，但 Safari 旧版和部分安卓 WebView 会忽略负值跳变，导致动画不动。稳妥做法是用百分比 + background-size 配合控制。
性能影响：纯 background-position 动画属于合成层属性，不触发布局重排，GPU 加速友好。
- 推荐写法：
background-position: 0% 0;→background-position: -100% 0;（前提是background-size: 288px 24px，且容器宽正好是单帧宽） - 避免在
@keyframes中混用 px 和 % 单位，容易触发回退到 CPU 渲染 - 动画必须绑定在伪元素（如
::after）上，否则可能干扰按钮本身的交互状态
如何让点赞后「保持实心」并支持再次点击取消
不能只靠 CSS 动画循环——动画播完就得停在最后一帧，同时还要响应点击切换状态。核心是用类名控制：初始无类，点下加 is-active 触发动画；动画结束监听 animationend，再根据当前状态决定是否保留实心态。
容易踩的坑：动画播完立即移除类名，导致“刚点完又变空心”；或没清掉正在播放的动画，造成重复触发。
- 给元素加
animation-fill-mode: forwards，确保动画停在最后一帧 - 监听
animationend事件时，检查event.animationName === 'heart-burst'，避免误响应其他动画 - 取消点赞时，先移除
is-active，再用getComputedStyle强制重绘，防止背景残留
