使用关键帧创建 CSS3 动画

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,学生将通过掌握强大的 @keyframes 规则和动画技术,深入探索 CSS3 动画的世界。课程全面讲解了如何创建动态网页动画,重点在于理解关键帧语法、定义动画属性,以及在不依赖 JavaScript 的情况下实现高级动画效果。

参与者将学习通过使用基于百分比的关键帧和变换属性来定义动画阶段,从而制作出流畅、复杂的动画。通过实际示例和动手练习,学生将掌握如何动态移动、调整大小和改变元素的颜色,获得使用纯 CSS3 动画技术创建引人入胜且交互性强的网页体验的技能。

理解 CSS3 动画关键帧语法

在这一步中,你将学习 CSS3 动画关键帧的基本语法,这是创建动态网页动画的基础。CSS 动画允许你在不使用 JavaScript 的情况下,将元素从一种样式平滑地转换为另一种样式。

让我们从理解 CSS 关键帧的基本语法开始。打开 WebIDE,在 ~/project 目录下创建一个名为 styles.css 的新文件。

CSS 关键帧动画使用 @keyframes 规则定义,该规则指定了动画序列中不同阶段的动画行为。以下是一个简单的示例来演示语法:

@keyframes moveRight {
  /* 起始状态 (0% 或 "from") */
  from {
    transform: translateX(0);
  }

  /* 结束状态 (100% 或 "to") */
  to {
    transform: translateX(300px);
  }
}

在这个示例中,moveRight 是动画名称,它定义了一个元素如何从其原始位置向右移动 300 像素。

你也可以使用基于百分比的关键帧来创建更复杂的动画:

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

这个动画展示了如何使用百分比值指定动画的多个阶段,从而实现更精细和动态的效果。

关于关键帧语法的要点:

  • 使用 @keyframes 后跟一个唯一的动画名称
  • 使用 from/to 或百分比值定义状态
  • 在每个阶段指定要动画化的 CSS 属性

简单动画的示例输出:

[一个 div 元素从左到右平滑移动]
[一个 div 元素从红色变为绿色再到蓝色]

使用 @keyframes 规则定义基础动画

在这一步中,你将学习如何使用 @keyframes 规则创建一个基础动画,通过构建一个简单的移动元素动画来加深理解。我们将基于之前步骤的知识,创建一个更实用的示例。

首先,让我们创建一个 HTML 文件来展示我们的动画。打开 WebIDE,在 ~/project 目录下创建一个名为 index.html 的新文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic CSS Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="animated-box"></div>
  </body>
</html>

现在,更新我们之前创建的 styles.css 文件,添加一个更详细的动画:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

@keyframes moveAndResize {
  0% {
    /* 起始状态 */
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    /* 动画中点 */
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    /* 结束状态 */
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

让我们分解一下 @keyframes 规则:

  • 我们定义了一个名为 moveAndResize 的动画
  • 在 0%(起始)时,盒子位于原始位置
  • 在 50%(中点)时,盒子向右移动 200px 并增大尺寸
  • 在 100%(结束)时,盒子向右移动 400px 并恢复到原始尺寸

示例输出:

[一个蓝色盒子:
 - 从左向右移动
 - 从正常大小变为更大再恢复
 - 颜色从蓝色变为绿色再到红色]

这个示例展示了如何:

  • 创建一个多阶段动画
  • 使用基于百分比的关键帧
  • 结合多种变换(平移和缩放)
  • 在动画过程中改变颜色

将动画属性应用到 HTML 元素

在这一步中,你将学习如何将动画属性应用到 HTML 元素,使你的关键帧动画真正动起来。我们将修改之前的 styles.css 文件,添加特定的动画属性来控制动画的行为。

使用以下 CSS 更新 styles.css 文件:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* 动画属性 */
  animation-name: moveAndResize; /* 关键帧动画的名称 */
  animation-duration: 3s; /* 一个动画周期的总时间 */
  animation-timing-function: ease-in-out; /* 平滑的加速和减速 */
  animation-delay: 1s; /* 开始前等待 1 秒 */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

关键动画属性解释:

  • animation-name:将元素链接到特定的 @keyframes 规则
  • animation-duration:设置一个完整动画周期的总时间
  • animation-timing-function:控制动画的速度曲线
  • animation-delay:指定动画开始前的等待时间

你也可以使用简写的 animation 属性来组合这些属性:

.animated-box {
  animation: moveAndResize 3s ease-in-out 1s;
}

示例输出:

[一个蓝色盒子:
 - 开始前等待 1 秒
 - 从左到右平滑移动
 - 逐渐改变大小和颜色
 - 完成一个动画周期需要 3 秒]

自定义动画时间和迭代

在这一步中,你将学习如何通过控制动画的时间、迭代和方向来微调你的 CSS 动画。我们将基于之前的示例,展示高级动画自定义功能。

使用以下 CSS 更新 styles.css 文件:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* 自定义动画属性 */
  animation-name: moveAndResize;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.3, 1);
  animation-iteration-count: 3; /* 重复动画 3 次 */
  animation-direction: alternate; /* 每次迭代时反转方向 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  100% {
    transform: translateX(400px) scale(1.5);
    background-color: red;
  }
}

关键动画自定义属性:

  • animation-timing-function:控制速度曲线(例如,使用 cubic-bezier() 自定义加速度)
  • animation-iteration-count:定义动画重复的次数
  • animation-direction:确定动画播放方向
  • animation-fill-mode:指定动画前后如何应用样式

你也可以使用简写的 animation 属性:

.animated-box {
  animation: moveAndResize 3s cubic-bezier(0.5, 0.1, 0.3, 1) 3 alternate
    forwards;
}

示例输出:

[一个蓝色盒子:
 - 移动和调整大小 3 次
 - 每次迭代时改变方向
 - 使用自定义速度曲线
 - 动画结束后保持在最终位置]

尝试高级动画效果

在这一步中,你将通过创建一个多元素、复杂的动画来探索高级 CSS 动画技术,展示 CSS 关键帧和变换的强大功能。

更新 index.html 文件以包含多个动画元素:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced CSS Animations</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
    </div>
  </body>
</html>

styles.css 的内容替换为以下高级动画:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity: 0.7;
}

.circle1 {
  background-color: #ff6b6b;
  animation: orbit1 4s infinite linear;
}

.circle2 {
  background-color: #4ecdc4;
  animation: orbit2 4s infinite linear;
}

.circle3 {
  background-color: #45b7d1;
  animation: orbit3 4s infinite linear;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(120deg) translateX(200px) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(200px) rotate(-480deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(240deg) translateX(250px) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(250px) rotate(-600deg);
  }
}

展示的关键高级动画技术:

  • 多个同时进行的动画
  • 复杂的旋转和平移
  • 无限循环的线性时间动画
  • 交错的轨道运动
  • 透明度和颜色变化

示例输出:

[三个彩色圆圈围绕中心点旋转
 - 圆圈以不同的距离移动
 - 连续、平滑的旋转
 - 重叠、半透明的效果]

总结

在本实验中,参与者探索了 CSS3 动画关键帧的基础知识,学习了如何在不使用 JavaScript 的情况下创建动态网页动画。实验重点在于理解 @keyframes 规则的语法,该语法允许开发者使用基于百分比或 from/to 状态来定义复杂的动画序列。参与者学会了通过在动画序列的不同阶段变换 CSS 属性(如位置、颜色和大小)来指定动画行为。

通过实践练习,学习者逐步创建了基础和高级的动画效果,包括在屏幕上移动元素、改变颜色以及自定义动画时间和迭代。通过尝试不同的关键帧配置,参与者获得了实际经验,能够制作出流畅且引人入胜的网页动画,从而增强用户界面的交互性和视觉吸引力。

您可能感兴趣的其他 CSS 教程