Recreating a GIF with CSS: Earth Day Edition

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

Inspiration

When I saw the challenge I wanted to participate to improve my skills, and when I saw the GIF in the announcement post I knew what to attempt. I had never done any “complex” animations with CSS alone so this was the right time to try.

Demo

Journey

Upon reading the announcement and seeing the GIF, I knew I had to attempt a CSS recreation. It was unique, outside my comfort zone and something worth doing and sharing.

I started by watching a video about CSS animations from Kevin Powell on YT as I had no idea where to start from. After this, I created a codepen account and started figuring things out.

I broke the GIF into chunks, starting from the clouds, then the earth, its face, its map background and its tree, while sequentially animating these elements along the way.

Time flew by as I initially struggled but eventually got the hang of things. At the end of it all, the animation was done and though it wasn’t perfect, It looked great and I was pleased with it.

Used Resources