Creating Earth's Orbital Animation with CSS

Introduction

In this project, you will learn how to create a CSS animation that simulates the Earth's orbit around the Sun. This project will help you understand the concepts of CSS animations and how to apply them to create a dynamic and visually engaging web experience.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the animation for the .earth-con element
• How to use the @keyframes for the orbit animation to create the Earth's rotation around the center

🏆 Achievements

After completing this project, you will be able to:

• Create a CSS animation that simulates the Earth's orbit around the Sun
• Understand the concepts of CSS animations and how to apply them to create dynamic and visually engaging web experiences
• Coordinate multiple CSS properties to achieve the desired animation effect

Set Up the Project Structure

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

├── css
│   └── style.css
└── index.html

Where:

• index.html is the main page.
• css/style.css is the CSS file where you need to add code.

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

Next, open the "Web 8080" on the top of the VM and manually refresh the page to see the following effect in your browser:

Set Up the Animation

In this step, you will learn how to add the animation to the .earth-con element in the css/style.css file.

1. Open the css/style.css file in the code editor, slide to the bottom of the code and you can see that orbit is the @keyframes rule already given and this @keyframes rule defines the animation sequence.

2. Locate the .earth-con class in the CSS file.

3. Inside the .earth-con class, add the following CSS properties to define the animation:

   animation: orbit 36.5s linear infinite;
   

   • animation-name: orbit
   • animation-duration: 36.5s
   • animation-timing-function: linear
   • animation-iteration-count: infinite

This will make the .earth-con element rotate around the center of the screen, simulating the Earth's orbit around the Sun.

4. Save the style.css file.
5. Go back to your browser and refresh the page. You should see the following effect:

Summary

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