21 关键帧动画详解

在上一篇教程中，我们了解了过渡与动画的基础知识。这一篇将重点探索关键帧动画（Keyframe Animation），一种强大且灵活的动画实现方式。通过关键帧动画，我们可以创建复杂的动画效果，提供更丰富的用户体验。

什么是关键帧动画？

关键帧动画允许我们在CSS中定义动画的各个阶段，具体来说，它通过@keyframes规则定义了一系列动画的状态。这些状态可以通过from和to关键字或自定义的百分比来表示。

语法结构

关键帧动画的基本语法如下：

@keyframes 动画名称 {
  0% { /* 开始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

关键帧的定义

• 0%（或 from）：定义动画的开始状态。
• 100%（或 to）：定义动画的结束状态。
• 其他百分比（如 50%）：定义动画的过渡状态。

创建一个简单的关键帧动画

让我们通过一个简单的案例来演示关键帧动画的创建。我们将制作一个简单的“跳跃”动画，让一个方块在屏幕上跳跃。

HTML 结构

首先，定义一个简单的HTML结构：

<div class="box"></div>

CSS 样式

接下来，我们编写CSS代码，通过关键帧动画来实现跳跃效果：

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  position: relative;
  animation: jump 2s infinite; /* 使用动画 */
}

@keyframes jump {
  0% {
    top: 0;  /* 初始位置 */
  }
  50% {
    top: -100px; /* 跳跃到100px的高处 */
  }
  100% {
    top: 0;  /* 返回初始位置 */
  }
}

效果展示

在这个例子中，.box类的方块将根据@keyframes jump中定义的状态从初始位置跳跃到点高度，然后回到初始位置。动画效果会持续2秒，且无限循环。

关键帧动画的动态特性

1. 多阶段动画：通过使用多个百分比关键帧，可以创建复杂的动画效果。例如，我们可以增加更多中间状态。

@keyframes bouncing {
  0% { top: 0; }
  25% { top: -50px; }
  50% { top: -30px; }
  75% { top: -10px; }
  100% { top: 0; }
}

2. 播放次数与时长：动画的持续时间和播放次数可以通过animation-duration和animation-iteration-count属性来控制。

.box {
  /* 其他样式保持不变 */
  animation: bounce 3s ease infinite; /* ease为缓动效果 */
}

3. 动画延迟：可以使用animation-delay属性来设置动画开始的延迟时间。

.box {
  animation: bounce 3s ease 1s infinite; /* 1s的延迟 */
}

结束语

通过关键帧动画，我们实现了丰富的交互效果，使得我们的网页更加生动。在下一篇教程中，我们将介绍CSS预处理器，包括Sass和LESS，这些工具可以帮助我们提高CSS代码的组织性和可维护性。掌握关键帧动画的使用将为你后续的CSS学习打下坚实的基础。继续学习，开启你的前端开发之旅吧！