抖音点赞动画需用@keyframes同步实现缩放、位移、透明度变化：起始scale(0)opacity:0；30%处scale(1.8)translatey(-20px)opacity:1；结束scale(1.2)translatey(-80px)opacity:0。
用 @keyframes 定义红心放大+位移+透明度变化的三段动画
抖音点赞动画本质是「缩放 + 向上位移 + 淡出」同步发生，不是单纯放大后消失。直接只用 transform: scale() 或只改 opacity 都会显得生硬。必须把三个变化揉进同一组关键帧里，且起始状态要设为不可见（scale(0) + opacity: 0），否则会出现闪一下再动的问题。
常见错误是起始写成 scale(1)，结果点击瞬间红心先“跳”出来再动，和抖音的丝滑感差很远。
- 推荐起始状态：
transform: scale(0) translateY(0); opacity: 0; - 中间点（约 30% 处）：
transform: scale(1.8) translateY(-20px); opacity: 1;（放大略过头制造弹性感） - 结束状态：
transform: scale(1.2) translateY(-80px); opacity: 0;（收一点再彻底消失，避免突兀）
用 animation 触发并控制播放时机与性能
动画不能靠 :hover 或 CSS 类切换就完事——抖音是点击后立即播一次，且多个点赞可能连续触发。必须用 JS 动态添加 class，并配合 animation-fill-mode: forwards 防止动画结束后回退到初始态（否则红心会突然“弹回”原位）。
还要加 animation-play-state: paused 初始态，避免页面加载时意外播放；JS 中用 element.style.animationPlayState = 'running' 精确控制启动时机。
抖音/快手短视频全栈专家。提供内容策划、脚本撰写、爆款拆解、算法运营、带货策略服务。适用于：创作短视频脚本、制定内容选题、分析爆款视频、制定平台运营策略、撰写带货话术、设计标题封面、理解算法逻辑。服务对象：短视频创作者、自媒体运营、品牌方、MCN机构。
- 必加属性：
animation: heart-burst 0.6s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;（贝塞尔曲线比ease-out更接近抖音的加速-减速节奏） - 避免用
animation-delay控制多颗心错峰——实际中应由 JS 控制每个元素的style.animationDelay，否则 CSS 无法动态适配点击频率 - 务必加
will-change: transform, opacity;在动画元素上，防止 iOS Safari 卡顿
用伪元素 ::after 渲染红心，避免 DOM 膨胀
每点一次就 document.createElement('div') 插入一个红心？DOM 节点会疯涨，尤其快速连点时。抖音实际用的是绝对定位 + 伪元素，复用同一个容器节点，只改变伪元素的动画状态。
核心思路：点赞按钮本身不渲染红心，而是用 button::after 绘制 SVG 路径或 Unicode ❤️，然后对伪元素单独做动画。这样无论点多少次，DOM 结构不变，JS 只需 toggle 一个 class。
- 伪元素必须设
content: "❤";或用background: url(data:image/svg+xml,...)内联 SVG（更清晰，无字体兼容问题） - 伪元素需显式设置
position: absolute、pointer-events: none（否则会挡住按钮点击） - 注意：Firefox 对伪元素
animation支持稳定，但旧版 Safari 需加-webkit-animation前缀
处理快速连点与动画叠加冲突
用户双击或连点时，如果前一个动画还没结束，新动画会覆盖或卡住——因为 CSS 动画默认不会中断正在运行的同名动画。这不是浏览器 bug，是规范行为。
解决方式不是禁用连点，而是每次触发前先清除已有动画：用 JS 调用 element.classList.remove('animate-heart')，再 offsetHeight 强制重排，最后加回 class。这个“重排抖动”能清掉浏览器内部的动画状态缓存。
- 更稳妥做法：给每个红心生成唯一 class 名（如
heart-12345），动画名也动态生成，彻底隔离 - 别依赖
animationend事件清理——iOS 上该事件常延迟或丢失，应配合setTimeout设保险时间（如 700ms）兜底 - 移动端要注意 touchstart 和 click 的双重触发，建议只监听
touchend并preventDefault，避免误播两次
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
