为图标、徽章、状态指示器等小元素添加有反馈和个性的动画时…

在图标、徽章、头像、状态指示器等小UI元素需要动画反馈时，按迪士尼12动画原则设计并可用CSS实现，增加个性与有意义反馈。

适用场景

解决思路

1. Squash & Stretch：在“点赞”点击时让心形图标做挤压/拉伸（squash/stretch）；通知徽标到达时可带挤压弹跳，增加小元素生命力。
2. Anticipation：图标动作前先短暂缩小到 scale(0.9)，持续 50ms；铃铛先向后倾斜再向前摇。
3. Staging：活跃/重要图标通过颜色、尺寸或动画突出；徽标使用对比色以突出。
4. Straight Ahead & Pose to Pose：简单图标用 pose-to-pose（两个状态）；复杂图标动画（morphing）可用 straight-ahead 获得有机过渡。
5. Follow Through & Overlapping Action：铃铛摇动在用户交互停止后继续；徽标数字先更新再等徽标弹跳稳定；多部件图标错开时间。
6. Ease In & Ease Out：图标 hover 用 `ease-out`；图标 click 用 `ease-in-out`；弹跳用 `cubic-bezier(0.68, -0.55, 0.27, 1.55)` 实现 overshoot。
7. Arcs：铃铛摆动遵循钟摆弧线；刷新图标沿真正圆形弧线旋转；箭头在状态变化时沿弧线运动。
8. Secondary Action：图标缩放（主要）时，颜色变化（次要）、光晕脉冲（第三）；徽标计数变化时徽标弹跳。
9. Timing：hover scale 100-150ms；click feedback 50-100ms；badge bounce 300-400ms；bell ring 400-600ms；status pulse 1500-2500ms；morph transition 250-350ms。
10. Exaggeration：庆祝型图标（confetti、hearts）可以很动感；功能型图标（menu、close）应克制；匹配用途。
11. Solid Drawing：图标在所有动画帧保持清晰；保持 stroke 一致；徽标数字在运动中可读。
12. Appeal：动画图标增加人格；弹跳通知感觉有生命；脉冲状态感觉响应；小细节很重要。
13. CSS 实现 hover：`.icon-btn:hover .icon { transform: scale(1.15); transition: transform 150ms ease-out; }`
14. CSS 实现 active：`.icon-btn:active .icon { transform: scale(0.9); transition: transform 50ms ease-in; }`
15. CSS 徽标弹跳：`.badge { animation: badgeBounce 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55); } @keyframes badgeBounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }`
16. CSS 状态脉冲：`.status-indicator { animation: pulse 2000ms ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } }`
17. CSS 铃铛摇动：`.bell-icon:hover { animation: ring 500ms ease-in-out; } @keyframes ring { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(15deg); } 40%, 80% { transform: rotate(-15deg); } }`
18. 关键属性：使用 `transform`: scale, rotate；`opacity`: pulse effects；`animation`: complex sequences；`fill`/`stroke`: SVG color changes；`filter`: glow effects。

适用边界 · 注意事项

• 功能型图标（menu、close）不要使用庆祝型夸张动画，应保持 subtle。
• 不要牺牲图标清晰度：所有动画帧保持 crisp、stroke 一致，徽标数字在运动中可读。
• 不要将动画时长与用途不匹配：功能反馈应短，庆祝型动画才可更长。