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

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

QQ客户端的不同版本、系统平台和聊天类型可能存在功能差异，因此无法保证所有设备都以相同方式显示动态图片。遇到静态显示时，应先检查文件格式、文件大小、发送方式和接收端的显示限制。

使用前需要检查的兼容性细节

动画声明：animation: qq-bounce 0.8s ease-in-out infinite。

上下弹动效果需要保留回到原位的过程，直接在两个位置之间匀速切换会显得生硬🔑。首尾位置应保持一致，中间😎的上移幅度可以略大于下移幅度，最后一次反弹幅度则应明显减小，这样更接近真实的弹性动作。

速度过快的动画可以通过增加 animation-duration 或❤️延长 GIF 🎉帧间隔来改善。提醒类按钮可使用 0.7 至 1 秒完成一次动作，装饰类元素可以更慢；如果动作持续循环，速度宁可偏慢，也不要让用户一直追着画面看。