必须同时声明 transform 和 opacity 的 transition 且用逗号分隔，如 transition: transform 0.3s ease, opacity 0.3s ease；仅用 all 或单属性会导致闪现、无膨胀或意外过渡；动画需 JS 控制类名配合 transitionend 事件，避免 :active 截断；scale 不可用 0，改用 0.01；移动端优先 touchstart 并防双击缩放。

transition 要同时控制 transform 和 opacity 才能自然

只加 transform 过渡，心形会突然闪现；只加 opacity，又没膨胀效果。必须两者都声明在 transition 里，且用逗号分隔，否则浏览器只认第一个属性。

• transition: transform 0.3s ease, opacity 0.3s ease; —— 缺一不可
• 如果写成 transition: all 0.3s;，可能意外触发其他属性（比如 color）的过渡，导致视觉干扰
• 别漏掉 ease 或类似缓动函数，线性（linear）会让膨胀显得机械生硬

:active 伪类无法撑起完整动画流程

用户点下去瞬间触发 :active，松开就回退，根本来不及播完“膨胀→缩回”两段。真实点赞动画得靠 JS 控制类名切换，把状态从“未点”→“点击中”→“已点”拆开。

• 初始状态：.like-btn → 心形小、半透明
• 点击后加类：.like-btn.is-animating → 触发 transform: scale(1.4) + opacity: 1
• 动画结束用 transitionend 事件移除该类，自动缩回（靠 CSS 回退到原始样式）
• 不监听 transitionend 就直接删类？动画会被截断，心形卡在放大态

scale(0) 会导致子元素消失，心形路径渲染异常

SVG 心形或伪元素做的心形，若用 scale(0) 收缩，某些浏览器（尤其是 Safari）会直接跳过渲染，松开后心形不出现。安全做法是用极小但非零值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 避免 transform: scale(0);
• 改用 transform: scale(0.01); 或 transform: scale(0.1);
• 配合 opacity: 0 隐藏，视觉上仍是“消失”，但 DOM 渲染不受影响
• 如果心形是 ::before 伪元素，还要确认父元素没设 overflow: hidden，否则缩放时边缘被裁

移动端 touch 事件比 click 更可靠

在 iOS 上，click 有约 300ms 延迟，用户点完看到动画滞后，体验像卡顿。直接绑定 touchstart 启动动画，再用 touchend 清理，响应更跟手。

立即学习“前端免费学习笔记（深入）”；

• JS 中优先监听 touchstart，而非 click
• 记得加 preventDefault() 防止双击缩放（仅当按钮区域易误触时）
• 为兼容非触屏设备，可 fallback 到 click，但别混用：同一按钮只选一种事件源，否则可能触发两次动画
• 别忘了移除事件监听器，尤其按钮可重复点击时，避免内存泄漏

CSS 动画本身不难，真正卡住人的地方在于：状态生命周期要和 JS 事件节奏对齐，而 scale 的数值边界、事件类型选择、浏览器渲染细节，每处差一点，心形就卡住、闪退或压根不动。