轻松掌握 CSS 动画 - 让你的页面活力四射！

CSS 动画的魅力：让你的网页动起来

准备好让你的网页活起来了吗？CSS 动画正是你需要的魔杖！它赋予了你为 HTML 元素注入生动的动作的能力，从平滑的过渡到引人入胜的动画效果，一切皆有可能。

点亮跳跃的圆点：用 CSS 实现 Loading 动画

让我们从一个简单而有趣的例子开始：用 CSS 动画实现 4 个小圆点依次跳动的 loading 动画。

1. HTML 布局

首先，你需要创建一个包含 4 个 div 元素的 HTML 结构，每个元素代表一个圆点：

<div class="loading">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

2. CSS 美化

接下来，让我们为这些圆点添加一些视觉上的魅力：

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 5px;
}

现在，这些圆点已经变得可爱又整洁。

3.动画时间

现在是让它们动起来的时候了！我们使用 animation 属性添加一个名为 dot-jump 的动画：

.dot {
  ...
  animation: dot-jump 1s infinite alternate;
}

其中，1s 表示动画持续 1 秒，infinite 表示它将无限次重复，alternate 表示圆点将交替跳动。

4.关键帧魔法

在 @keyframes 块中，我们定义了动画在不同时间点的状态：

@keyframes dot-jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

• 0%：圆点从顶部开始。
• 50%：圆点跳到中间位置（向上移动 10px）。
• 100%：圆点回到顶部。

5.见证奇迹

完成这些步骤，你就会看到 4 个圆点轮流跳动，为你的页面增添一丝生动有趣的元素。

探索 CSS 动画的更多可能性

跳动的圆点只是冰山一角。CSS 动画可以用来创建各种各样的效果，例如：

• 平滑的元素过渡
• 淡入淡出效果
• 复杂的旋转和缩放动画
• 引人入胜的角色动画

5 个 CSS 动画常见问题解答

• Q：如何控制动画速度？

  • A： 使用 animation-duration 属性调整动画持续时间。

• Q：如何设置动画方向？

  • A： 使用 animation-direction 属性，如 normal、reverse 或 alternate。

• Q：如何为多个元素应用相同的动画？

  • A： 创建动画类并将其添加到所有相关元素。

• Q：如何停止动画？

  • A： 使用 animation-play-state 属性，将其设置为 paused 或 running。

• Q：如何在兼容性方面做出考虑？

  • A： 使用 CSS 3 动画支持良好的浏览器。

结论

CSS 动画是一个强大的工具，可以让你为网页注入活力和交互性。从简单的加载动画到复杂的交互式内容，可能性是无穷无尽的。通过掌握 CSS 动画，你将能够提升用户体验并为你的页面增添额外的魅力。