Create Animated Sequences with CSS

Introduction

In this project, you will learn how to create an animated sequence using CSS. The project is based on the story of a group of disciples who set out on a journey to the Western Heaven to seek Buddhist scriptures. However, they were immobilized midway by demons, and a character named Tom used CSS to save them, allowing the disciples to continue their journey to the West.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to set up the animation frames for the characters in the scene
How to define the animation keyframes for each character to create the illusion of movement
How to make the animations loop infinitely to create a continuous, seamless animation

🏆 Achievements

After completing this project, you will be able to:

Utilize CSS animations to create dynamic and engaging visual effects
Coordinate multiple animations to create a cohesive, synchronized animation sequence
Optimize animations for performance and responsiveness

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css(("`CSS`")) -.-> css/CodingStandardsandBestPracticesGroup(["`Coding Standards and Best Practices`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") css/CodingStandardsandBestPracticesGroup -.-> css/comments("`Comments`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/margin_and_padding -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/width_and_height -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/positioning -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/backgrounds -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/animations -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/mixins -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/comments -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} css/pseudo_classes -.-> lab-300124{{"`Westward Journey to Heavenly West`"}} end

Set Up the Project Structure

To get started, open the experiment environment, and the directory structure is as follows:

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

Where:

index.html is the main page.
images is the picture folder.
css is the css folder.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

When you preview the index.html page in the browser, you will notice that the animation only plays once and then stops. The page effect is as follows:

Set Up the Animation Frames

In this step, you will learn how to set up the animation frames for the characters in the Westward Journey to Heavenly West project.

Open the css/style.css file in the code editor and you can see that a1, a2, a3, a4 are the four @keyframes rules that have been given, and that @keyframes rule defines the animation sequence. These keyframes define the animation for each character, moving the background image horizontally to create the illusion of movement.
In the .actor:first-child rule, change to the following code to animate the first character:

animation: a1 0.8s steps(8) infinite;

This will make the first character's animation loop infinitely, with each frame lasting 0.8 seconds and the animation having 8 steps.

In the .actor:nth-child(2) rule, change to the following code to animate the second character:

animation: a2 0.8s steps(8) infinite;

This will make the second character's animation loop infinitely, with each frame lasting 0.8 seconds and the animation having 8 steps.

In the .actor:nth-child(3) rule, change to the following code to animate the third character:

animation: a3 0.8s steps(8) infinite;

This will make the third character's animation loop infinitely, with each frame lasting 0.8 seconds and the animation having 8 steps.

In the .actor:last-child rule, change to the following code to animate the fourth character:

animation: a4 0.8s steps(8) infinite;

This will make the fourth character's animation loop infinitely, with each frame lasting 0.8 seconds and the animation having 8 steps.

Save the style.css file.

Now, when you preview the index.html file in the browser, you should see the characters' animations looping infinitely.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.

Westward Journey to Heavenly West