This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day 2024

Inspiration

The inspiration for this CSS animation project was drawn from a YouTube channel named Online Tutorials dedicated to showcasing innovative CSS coding projects and creative web animations. As a subscriber to the channel, I was inspired by the diverse range of animations and visual effects demonstrated in their videos.
Video Link: CSS 3D Text Animation Effect

Demo

Below given is live link for the submission.
Live Link: Earth Day 2024 Rotate with CSS

Journey

Creating this CSS animation for Earth Day taught me:
Keyframes and Animations: How to define keyframes and create smooth animations using CSS.
Custom Properties: Using CSS variables to modularize code and adjust animation timing.
Positioning and Layering: Techniques for overlaying continent landscapes onto elements.
Styling: Applying CSS styles for text and element enhancements.
Animation Control: Experimenting with animation timing and easing functions for desired effects.

Thank You!