Today is a CSS day. Not only that, we’re adding some animations baby! So here’s the gist, I want to make a pure CSS image of a rocket blasting off.  so let’s just get right to it.

As always, I started off with Sketch to illustrate the rocket and honestly it’s a good way to help me think of how I’ll structure the HTML. It was rough which made me realize how much of a n00b I am when it comes to vector graphics [baby steps I guess]

okay with that out of the way, we move on to the code. and better than talking about it, I’ll show you the process

Started with dynamic stars

then I moved on to building the rocket. To be honest, this was the point where I was about to cop out and just convert the sketch image to an image and just animate that, but then that beats the point of practicing CSS so yeah I soldiered on and started drawing with CSS. [so proud that I did that]

wooohoooo it’s complete! [happy dance] Now I move on to making the clouds

alright now I try to animate the rocket here we go

cool! just a couple of final touches and …

YAY! I’m pretty proud of myself ^-^

Here’s a link to the demo.

Have a lovely day and happy coding 🙂