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
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
- https://www.youtube.com/watch?v=NdftnCDwKaU
- https://cssanimation.rocks/spheres/
- https://lauryndbrown.github.io/2017/06/08/creating-clouds-in-css.html
- https://codepen.io/nelledejones/pen/gOOPWrK?editors=1100
Top comments (8)
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:
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%
Ooh, thanks, I'll try them out
Dude the way you did the cloud shape is actually ingenious nice work!
It's all thanks to this article:
lauryndbrown.github.io/2017/06/08/...
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!
Nice work, The way you did it, It's Amazing
Man, great animation. That tree which came up all the way from the bottom was like a rocket launcher ;)
I think this is an awesome submission to the challenge! You may have even inspired me to give it a try! π€