首屏加载应采用骨架屏配合shimmer动画，时长1.2s–2.5s，优先opacity+transform，通过prefers-reduced-motion降级，并在核心内容加载后平滑切换，辅以微动效按钮提供明确反馈。
页面加载时的空白或静态等待容易让用户失去耐心，加点轻量级 CSS 动画能显著提升首屏体验——关键不是炫技，而是用动画传递“正在加载”的明确信号，同时保持流畅与克制。
用骨架屏（Skeleton Screen）替代白屏
骨架屏是当前最实用的首屏动画方案：在真实内容加载前，先渲染出结构相似的灰色占位块，模拟内容布局。它比传统 loading 圈更符合用户预期，也减少“卡住”感。
- 用纯 CSS 实现，无需 JS 控制显隐，性能友好
- 宽度、高度、圆角等尽量贴近真实组件（如头像用圆形、标题用长矩形、段落用多行细条）
- 配合 shimmer 动画：从左到右渐变亮色扫过，模拟光线流动，增强动态感
控制动画节奏，避免干扰内容获取
首屏动画不是越快越好，也不是越花越好。重点在于“可感知但不抢戏”：
- 单次动画时长建议 1.2s–2.5s，循环动画间隔不低于 1.5s
- 避免大面积位移或旋转，优先使用 opacity + transform（translate/scale）组合，保障硬件加速
- 文字类占位不用动画，图片/卡片区域可加 shimmer，按钮可做轻微脉冲（opacity 微调）
按需启用，兼顾性能与体验
动画不该在低端设备或省电模式下强行运行，可通过 CSS 媒体查询智能降级：
立即学习“前端免费学习笔记（深入）”；
- 检测 prefers-reduced-motion: reduce，对开启“减少动画”的用户直接关闭所有非必要动效
- 用 @supports (animation-name: shim) 隔离支持 CSS 动画的环境
- 首屏核心内容加载完成，立即用 class 切换隐藏骨架，用 transition 平滑过渡到真实样式
小而准的加载指示器仍有必要
骨架屏不能完全替代明确的状态反馈。在关键异步操作处（如点击搜索、提交表单），叠加一个微动效按钮或内嵌 loading 图标更稳妥：
- 按钮内部用 ::after 伪元素绘制三像素点，依次 opacity 变化，形成呼吸节奏
- 图标尺寸控制在 16px 内，颜色与主色调一致，不引入新色值
- 动画仅在交互触发后出现，完成后自动消失，不常驻
不复杂但容易忽略：动画的价值不在“动”，而在“告诉用户系统有响应、内容在途中”。做好节奏、克制范围、尊重偏好，就能让加载过程从等待变成期待。
