需要让界面动画温暖、欢迎…

适用于客服、引导流程、社区、医疗、教育、小微企业网站、个人作品集、聊天机器人等需要让用户感到温暖、舒适并愿意交互的界面动画。

适用场景

解决思路

1. 用轻柔、欢迎、不具压迫感的运动实现亲切感；让动画邀请交互，并让用户感到舒适。
2. Squash & Stretch：做 10-20% 的适度、柔和形变，足够有生命感但不卡通化，像友好握手一样温暖且得体。
3. Anticipation：做 100-150ms 的温和预备动作，用不惊吓人的方式预告意图，像动作前的小声“hello”。
4. Staging：采用开放、邀请式的构图；元素排布用于欢迎而非对峙，并给界面留出清晰路径。
5. Straight Ahead Action：加入轻微自发性来塑造个性；用细微变化显得像人、可接近，而不是机械。
6. Follow Through & Overlapping Action：做柔软、自然的收尾；加入一两次轻微弹跳，像朋友在旁边坐下一样放松、不僵硬。
7. Slow In & Slow Out：使用平滑、可接近的曲线，不要尖锐加速；欢迎式入场用 `ease-out`，让元素轻柔到达。
8. Arc：使用自然、放松的曲线；运动要像人，不要机械直线，也不要夸张弹跳。
9. Secondary Action：加入温暖的辅助动作，例如轻微挥手、轻点头，让元素确认用户存在。
10. Timing：使用中等、舒适的 200-350ms；不匆忙、不迟钝，保持像对话一样自然的节奏。
11. Exaggeration：使用轻微夸张 10-20%；有足够个性但不压倒用户，相关、不戏剧化。
12. Solid Drawing：使用柔软、圆润的形体与可接近的比例；不要尖锐或令人畏惧。
13. Appeal：使用暖色、圆角；适当加入友好面孔；美学要邀请人且可访问。
14. Welcome fade：250-350ms，`ease-out`。
15. Slide in：300-400ms，`ease-out`。
16. Hover response：150-200ms，`ease-out`。
17. Expand/reveal：250-350ms，`ease-in-out`。
18. 定义 CSS 缓动变量：`--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1);`。
19. 定义 CSS 入场缓动变量：`--friendly-enter: cubic-bezier(0.0, 0, 0.2, 1);`。
20. 定义 CSS 弹跳缓动变量：`--friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);`。
21. 创建 `@keyframes friendly-wave`：`0%, 100% { transform: rotate(0deg); }`、`20% { transform: rotate(14deg); }`、`40% { transform: rotate(-8deg); }`、`60% { transform: rotate(10deg); }`、`80% { transform: rotate(-4deg); }`。
22. 创建 `@keyframes friendly-appear`：`from { opacity: 0; transform: scale(0.95) translateY(8px); }`，`to { opacity: 1; transform: scale(1) translateY(0); }`。
23. 悬停时用温和的确认反馈。
24. 动画朝向用户，而不是远离用户。
25. 使用柔和阴影，不要硬边缘。
26. 元素应有可触及感。
27. 避免压倒性或对抗性的运动。

适用边界 · 注意事项

• 不适合需要严肃、紧张、警告或威慑氛围的界面。
• 不适合要求极速反馈、高信息密度或完全无动画的专业工具场景。
• 不适合高风险决策、危险操作等需要制造警觉性的交互。