html本身不支持动画，点赞爱心动画必须由css+javascript配合实现；css用@keyframes定义缩放与透明度变化，js控制.like--active类的添加与定时移除，确保点击反馈精准、不累积、不卡顿。
直接说结论：HTML 本身不支持动画，点赞爱心动画必须靠 CSS + JavaScript 配合实现；纯 HTML 标签加 <img> 或 <svg></svg> 只能静态展示，动不起来。
用 CSS @keyframes 做爱心缩放+透明度变化
这是最轻量、性能最好的方案，适合点击后触发一次“跳动”效果。关键不是写多炫的动画，而是控制好触发时机和重置状态：
- 爱心用
<svg></svg>内联写死（避免额外请求），路径用fill="currentColor"方便统一配色 - 动画定义在
.like--active类里，用transform: scale(1.4)+opacity: 0.8模拟“弹出感” - 必须加
animation-fill-mode: forwards，否则动画播完立刻回弹，用户看不到“已点赞”状态 - 别用
animation: like-anim 0.4s ease-out直接写死——要等 JS 点击后才加类，否则页面一加载就自动播
/* 示例 CSS */
@keyframes like-anim {
0% { transform: scale(1); opacity: 1; }
70% { transform: scale(1.4); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
.like--active {
animation: like-anim 0.4s ease-out;
animation-fill-mode: forwards;
}
JS 里用 classList.add() + setTimeout 控制类切换
很多人卡在这步：点了没反应，或连点多次动画错乱。根本原因是没管理好类名生命周期：
- 点击时立即
element.classList.add('like--active')触发动画 - 用
setTimeout在动画时长结束后移除类（比如0.4s对应400），避免连续点击堆积动画 - 如果要区分“点赞/取消”，需先判断当前状态：
if (el.classList.contains('liked')) { ... }，再决定加/删类 - 别用
click绑定在<div> 上还忘了 <code>preventDefault()——按钮语义更清晰，用<button type="button"></button>为什么不用
transition替代@keyframes？过渡（
transition）适合状态切换，但点赞动画需要“一次爆发式反馈”，transition容易被反复触发打断：- 如果给
scale加transition，用户快速连点两次，第二次会中断第一次的过渡，导致爱心卡在中间大小 -
@keyframes是原子操作，播完即止，配合animation-fill-mode: forwards能稳住最终帧 - 真要用
transition，得加pointer-events: none锁定点击区域，或用getComputedStyle检测动画是否进行中——反而更绕
移动端要注意
touchstart替代click防延迟iOS Safari 和部分安卓浏览器对
click有 300ms 延迟，点赞反馈明显滞后：- 监听
touchstart事件，但注意它不冒泡，得绑定到目标元素本身（不能只绑父容器） - 为兼容 PC，建议同时监听
click和touchstart，用event.type === 'touchstart'区分 - 别忘了
event.preventDefault()阻止 touch 默认行为，否则可能触发页面滚动 - SVG 爱心在 iOS 上有时响应区偏小，给
<button></button>加padding扩大热区，别只依赖图标尺寸
真正难的不是写出动画，而是让每次点击都精准触发、不卡顿、不累积、不误触——尤其是连点和快速切换状态时，类名管理和事件时机比动画曲线重要得多。
- 如果给
