最轻量高性能的气泡弹出动画应使用 transform: scale() 配合 transition 实现，初始设 scale(0) 与 transform-origin: bottom center，并添加 will-change: transform 和 pointer-events 控制；避免 width/height 或 opacity 过渡，禁用纯 @keyframes 方案，注意 iOS Safari 的 backface-visibility、overflow 及 filter 替代 box-shadow 等兼容性处理。
用 transform: scale() 实现气泡弹出动画
直接给聊天气泡元素加 scale(0) 初始状态，再通过添加类触发 scale(1) 过渡，是最轻量、性能最好的方式。避免用 width/height 或 opacity 单独过渡——前者触发布局重排，后者无法体现“从无到有”的缩放感。
关键点：
-
transform必须配合transition使用，且过渡属性要写全：transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67); - 初始状态需设
transform: scale(0);并搭配transform-origin: bottom center;（让气泡从输入框顶部中心“撑开”） - 务必加
will-change: transform;（尤其在移动端），防止首帧卡顿
为什么不能只靠 @keyframes 定义动画？
纯 @keyframes 定义的动画默认是“播放即触发”，无法和用户操作（比如点击发送按钮）精准同步；而且每次都要调用 animation + animation-play-state 控制启停，容易出现重复触发、动画堆积问题。
更可靠的做法是用 JS 切换 class：
立即学习“前端免费学习笔记（深入）”；
- 气泡 DOM 初始化时带
class="bubble bubble--hidden" - 发送成功后，JS 执行
bubble.classList.remove('bubble--hidden') - CSS 中定义：
.bubble--hidden { transform: scale(0); }和.bubble:not(.bubble--hidden) { transform: scale(1); }
scale(0) 下的点击穿透问题怎么破？
当气泡处于 scale(0) 状态时，它仍占据文档流位置（除非设了 display: none），但视觉上不可见，此时鼠标事件可能穿透到下层元素——比如误点到输入框背后按钮。
解决方法必须同时满足两点：
- 缩放为 0 时，加
pointer-events: none; - 缩放完成时（
scale(1)），加pointer-events: auto; - 不能只靠 JS 在动画结束回调里改
pointer-events——因为 CSS 过渡可能被用户强制中断（如切 Tab），稳妥做法是用两个 class 分别控制：.bubble--hidden { pointer-events: none; }和.bubble:not(.bubble--hidden) { pointer-events: auto; }
移动端 iOS Safari 的 transform 动画卡顿
iOS 15+ 之前，Safari 对 transform 的硬件加速支持不稳定，尤其在 scale 从 0 开始时容易掉帧。不是加 translateZ(0) 就能解决，得组合处理：
- 给气泡加
backface-visibility: hidden; - 确保父容器没有
overflow: hidden（会禁用合成层） - 如果气泡带阴影，把
box-shadow换成filter: drop-shadow()，后者走 GPU 加速更稳 - 动画时长别低于
0.15s——太短 iOS 会直接跳过过渡
cubic-bezier() 曲线是否匹配“弹出”节奏，而不是参数堆砌。缩放动画最易被忽略的，其实是 transform-origin 的定位精度——差几个像素，气泡就像歪着炸开。 
