使用 CSS 创建动画序列

介绍

在这个项目中，你将学习如何使用 CSS 创建动画序列。该项目基于一群弟子踏上西天取经之旅的故事。然而，他们中途被妖怪困住，一个叫汤姆的角色用 CSS 救了他们，使弟子们得以继续他们的西行之旅。

👀 预览

CSS 动画版弟子西行

🎯 任务

在这个项目中，你将学习：

如何为场景中的角色设置动画帧
如何为每个角色定义动画关键帧以营造运动错觉
如何使动画无限循环以创建连续、无缝的动画

🏆 成果

完成这个项目后，你将能够：

利用 CSS 动画创建动态且引人入胜的视觉效果
协调多个动画以创建连贯、同步的动画序列
针对性能和响应能力优化动画

设置项目结构

首先，打开实验环境，其目录结构如下：

├── css
│   └── style.css
├── images
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png
│   └── west_04.png
└── index.html

其中：

index.html 是主页。
images 是图片文件夹。
css 是 CSS 文件夹。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

当你在浏览器中预览 index.html 页面时，会注意到动画只播放一次然后就停止了。页面效果如下：

初始效果

设置动画帧

在这一步中，你将学习如何为“西天取经”项目中的角色设置动画帧。

在代码编辑器中打开 css/style.css 文件，你会看到已经给出了 a1、a2、a3、a4 这四个 @keyframes 规则，并且 @keyframes 规则定义了动画序列。这些关键帧为每个角色定义了动画，通过水平移动背景图像来营造运动错觉。
在 .actor:first-child 规则中，将代码更改为以下内容，为第一个角色设置动画：

animation: a1 0.8s steps(8) infinite;

这将使第一个角色的动画无限循环，每一帧持续 0.8 秒，动画有 8 步。

在 .actor:nth-child(2) 规则中，将代码更改为以下内容，为第二个角色设置动画：

animation: a2 0.8s steps(8) infinite;

这将使第二个角色的动画无限循环，每一帧持续 0.8 秒，动画有 8 步。

在 .actor:nth-child(3) 规则中，将代码更改为以下内容，为第三个角色设置动画：

animation: a3 0.8s steps(8) infinite;

这将使第三个角色的动画无限循环，每一帧持续 0.8 秒，动画有 8 步。

在 .actor:last-child 规则中，将代码更改为以下内容，为第四个角色设置动画：

animation: a4 0.8s steps(8) infinite;

这将使第四个角色的动画无限循环，每一帧持续 0.8 秒，动画有 8 步。

保存 style.css 文件。

现在，当你在浏览器中预览 index.html 文件时，应该会看到角色的动画在无限循环。

西天取经动画预览

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。