心形点赞动画用@keyframes而非transition，因其适配瞬时点击、单次完整播放及精细节奏控制；三段式关键帧（0%→30%→70%→100%）模拟心跳感，需配合transform-origin: center、animationend清理class、translatez(0)开启gpu加速等细节确保稳定生效。
心形点赞动画为什么用 @keyframes 而不是 transition
因为点赞动作是「瞬时触发 + 单次播放」，比如用户点击后心形立刻放大再回弹，不需要悬停维持状态。用 transition 需要依赖类名切换+状态保持（如 hover 或 active），而实际交互中点击是毫秒级事件，transition 容易因 class 移除过快导致动画中断。用 @keyframes 配合 animation 可确保完整播放一次，且支持更精细的缩放路径控制（比如先放大 1.4 倍再回弹到 1.1 倍，最后归零）。
@keyframes heart-scale 的关键帧怎么写才自然
生硬的线性缩放（0%→100% 均匀变化）看起来像机械弹跳。真实的心跳反馈有“起得快、落得缓、带余震”的节奏感。推荐三段式关键帧：
@keyframes heart-scale {
0% { transform: scale(1); }
30% { transform: scale(1.4); }
70% { transform: scale(1.1); }
100% { transform: scale(1); }
}
- 30% 处陡升到最大值，模拟“瞬间击中”感
- 70% 回落到略大于原始尺寸，避免“戛然而止”
- 100% 归零，但靠
animation-fill-mode: forwards保持最终态（可选） - 别漏掉
transform-origin: center，否则缩放中心偏移会导致心形漂移
点击触发动画时容易忽略的 DOM 操作细节
光定义动画没用，必须让元素在点击时真正“播放”。常见错误是直接加 class 后不重置，导致第二次点击无反应。正确做法是：
- 用 JS 在点击时添加临时 class（如
is-animating） - 动画结束后用
animationend事件监听并移除该 class - CSS 中只对
.is-animating应用animation: heart-scale 0.4s ease-out - 避免用
setTimeout延时移除 class——不同设备帧率不同，animationend更可靠
移动端真机上缩放动画卡顿或失效怎么办
iOS Safari 和部分安卓 WebView 对 transform: scale() 的硬件加速支持不稳定，尤其嵌套在 flex/grid 容器里时。解决方法很具体：
- 给心形元素强制开启 GPU 加速：
transform: scale(1) translateZ(0) - 确保父容器没有
overflow: hidden（会截断缩放后的边缘） - 如果心形是伪元素（
::before/::after），需给宿主元素设position: relative，否则transform-origin失效 - 动画时长别低于 0.2s——太短在低端机上可能被浏览器优化掉
心形动画最脆弱的环节不在 keyframes 写法，而在触发时机与渲染上下文的耦合。一个没设 transform-origin 的心形，在不同布局流里缩放中心会乱飘；一次没清理的 class，会让后续所有点击都静音。这些点不报错，但效果全无。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
