CSS Animation | Earth's Orbit Around the Sun

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/DynamicStylingGroup -.-> css/animations("`Animations`") subgraph Lab Skills css/animations -.-> lab-300055{{"`Creating Earth's Orbital Animation with CSS`"}} end

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.

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.
Locate the .earth-con class in the CSS file.
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