动效哲学与产品哲学一致——克制、安静、够用。动效是辅助,不是表演。
以下四类动效在满意解全域一律禁止,无论首页、研习社还是驾驶舱。
禁止 bounce / 回弹类缓动(如 cubic-bezier(0.34,1.56,0.64,1) 回弹)。元素到位即停,不做过冲回弹。
禁止高频 opacity 闪烁、颜色频闪。单帧停留不得短于 0.1s,避免诱发光敏不适。
禁止全屏炸开 / 缩放冲击式弹窗。模态须淡入(opacity + translateY),且首屏不自动弹出。
单次动画时长不超过 0.6s(入场可至 0.8s),循环动画周期 ≥ 4s,避免拖沓与注意力消耗。
所有动效须遵循 prefers-reduced-motion:用户开启"减少动态效果"时,动画时长降至 0.01ms 且只播一次。现有 index.html 已默认挂载该媒体查询,新增动效须兼容之。
来源:sri-design-system-v4.css 与 index.html 内联样式。状态列标注合规情况。
| 动画 / 过渡 | 位置 | 用途 | 时长 | 状态 |
|---|---|---|---|---|
| transition: all .2s | design-system · .btn / .sri-card | 按钮、卡片 hover 反馈 | 0.2s | ✓ 合规 |
| transition: border-color .2s | design-system · .sri-input | 输入框聚焦边框 | 0.2s | ✓ 合规 |
| transition: width .1s linear | design-system · .sri-progress-bar::after | 阅读进度条 | 0.1s | ✓ 合规 |
| .sri-btt 过渡 | design-system · .sri-btt | 返回顶部按钮显隐 | 0.3s | ✓ 合规 |
| @keyframes speedPulse | index.html · .hero-speed-* | 首屏速度线呼吸 | 6-10s 循环 | ✓ 合规 |
| @keyframes nodeWake / nodePulse | index.html · .hero-node | AI 节点唤醒 + 脉冲 | 0.8s + 3s 循环 | ✓ 合规 |
| @keyframes lightBreathe | index.html · .hero-light | 破界光柱呼吸 | 6s 循环 | ✓ 合规 |
| @keyframes fadeIn | index.html · 多元素 | 文字 / 品牌淡入 | 0.4-0.5s | ✓ 合规 |
| @keyframes fireIn / fireExtend | index.html · .hero-line1/2 | 首屏主标题入场 | 0.6-0.7s | ✓ 合规 |
| @keyframes ctaPop | index.html · .hero-cta | 主 CTA 入场 | 0.5s,含回弹 | ⚠ 回弹缓动 |
| @keyframes arrowBounce | index.html · .hero-arrow | 向下箭头提示 | 2s 循环 | ✓ 合规 |
| @keyframes fadeStep | consult.html · .co-step | 表单步骤切换 | 0.3s | ✓ 合规 |
@keyframes ctaPop 使用 cubic-bezier(0.34,1.56,0.64,1)(回弹),违反"禁弹跳"。cubic-bezier(0.22,1,0.36,1)(easeOutQuint,无回弹),或纯 ease-out。animation: ctaPop 0.5s ease-out 2.1s forwards;display:none 关闭部分。sri-design-system-v4.css 增加 --sri-dur-fast:.15s; --sri-dur-normal:.2s; --sri-dur-slow:.3s;,统一引用,避免魔法数字。用户应该"感觉到顺畅",而不是"注意到动画"。动效的存在感越低,体验越高级。
满意,是最被低估的战略智慧