DEV Community

Cover image for Recreating a GIF with CSS: Earth Day Edition
Nabil Alamin
Nabil Alamin

Posted on

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.

earth-day-gif

Demo

sadly, it doesn't loop so click rerun↗️ to replay

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

bye-bye

Top comments (8)

Collapse
 
warkentien2 profile image
Philip Warkentien II • Edited

Looks great! I had the same idea, but missed the deadline.
About making the animation run without hitting rerun, here are two options:
1 - (easier) make it trigger on container :hover, and add a ":hover me" call to action.
- set animation-play-state: paused; after each animation definition.
- add:

body:hover * { animation-play-state: running !important; }
Enter fullscreen mode Exit fullscreen mode

2 - (loop) make it loop! Add animation-iteration-count: infinite;
- make multiple animations have the same duration. Might have to change keyframes interval. E.g.: Making a 2s animation last 5s: change 0% to 100% for 0% to 40%, 100% (40 and 100 duplicates final state). 40% = 2s/5s * 100%

Collapse
 
arndom profile image
Nabil Alamin

Ooh, thanks, I'll try them out

Collapse
 
mfalconi profile image
mfalconi

Dude the way you did the cloud shape is actually ingenious nice work!

Collapse
 
arndom profile image
Nabil Alamin

It's all thanks to this article:
lauryndbrown.github.io/2017/06/08/...

Collapse
 
mfalconi profile image
mfalconi

ah nice yeah i tried doing something similar its difficult to maintain the shape when you want it large i found, been playing with it a lot haha! thanks for sharing!

Collapse
 
bhallibhai profile image
Bhalli B

Nice work, The way you did it, It's Amazing

Collapse
 
ranjancse profile image
Ranjan Dailata

Man, great animation. That tree which came up all the way from the bottom was like a rocket launcher ;)

Collapse
 
turtlewake profile image
Sean Davis

I think this is an awesome submission to the challenge! You may have even inspired me to give it a try! 🤙