方法一：用 CSS 做出有回弹感的上下动画

CSS 上下弹动动画的核心是让元素依次经过原位、上移、下落、轻微上🎇移和回到原位几个节点。常用幅度可以从 3 至 8 像素开始，幅度过大时容易产生跳动感，幅度过小时又不容易被看见。

GIF 文件出现卡顿时，通常不是 QQ 本身的问题，而是帧数、图片尺寸或导出方式不合适。可以减少每帧像素尺🌈寸、压缩颜色数量、删除重复帧，同时保留关键的上移和回弹画面。需要保持清晰头像时，不宜把原图反复放大再缩小，否📌则边缘会越来越模糊。

如果聊天场景必须呈现上下方向的弹动，动态表情或 GIF 图片比窗口🍀抖动更合适。发送前需要观察图片在聊天窗口中的循环速度，▶️过快的动画会显得刺眼，过慢的动画又可能被误认为静态图片。

QQ弹弹上下抖动的三种实现路径

对于需要长期展示的元素，建议设置减少动态效果的替代状态。网页可以在用户偏好减少动画时停止循环，聊天图片则可以同时保留一张静态版本。这样既能保留 QQ弹弹上下抖动的视觉效果，也不会让动画🌈干扰阅读和操作。