前端Wiki/CSS3/进阶/动画 animation

实战加载动画

加载动画是 animation 最经典的练手场景。做一个「三点跳动」加载器，只靠三个圆点和错开的延迟：

三个点共用同一套跳跃剧本，各自加 animation-delay: 0 / .15s / .3s，错峰形成波浪感。
剧本里同时动 transform（上跳）和 opacity（变淡），由合成器渲染，性能无忧。
容器悬停时 animation-play-state: paused 演示暂停控制。

再叠加一个旋转圆环的思路：一个带透明缺口的圆环无限 rotate，就是「spinner」。两种加载器合起来，覆盖了 delay 错峰与无限旋转两个最常用的动画模式，稍加改造就能用在真实项目的加载状态里。

本节要点错峰动画的核心是各元素不同 animation-delay；translateY + opacity 组合性能最佳；旋转 spinner 用 infinite rotate；暂停用 play-state。

CSS

<style>
  .loader {
    display: inline-flex; gap: 8px;
    padding: 14px;
  }
  .dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #39c5cf;
    animation: jump 0.9s ease-in-out infinite;
  }
  /* 三个点依次延迟，形成波浪 */
  .dot:nth-child(2) { animation-delay: .15s; }
  .dot:nth-child(3) { animation-delay: .3s; }
  @keyframes jump {
    0%, 100% { transform: translateY(0); opacity: .4; }
    50%      { transform: translateY(-12px); opacity: 1; }
  }
  .ring {
    width: 32px; height: 32px;
    border: 4px solid #b2ebf2;
    border-top-color: #39c5cf; /* 缺口高亮 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
<div class="loader">
  <span class="dot"></span><span class="dot"></span><span class="dot"></span>
</div>
<div class="ring"></div>

🔗 相关词条animation transform state 元素

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读