Animating our Rocket
To animate your rocket, we will give you some code to start with, and some room for creativity!
You may want to keep the rolling ball repl.it open in another tab as a reference.
Animate!
Steps 1 and 2 do not have to be taken in order - you choose where you'd like to start!
- Inside of your
.rocketrule, declare an animation name, duration, timing function and delay. - Outside of your
.rocketrule, write a keyframe. Use this code:to { transform: translate(0px, -450px) }inside of the keyframe.
After completing Steps 1 and 2, run the code. Is the animation running? If not - let's troubleshoot for typos or small errors; feel free to ask for help! If so - what is it doing, and what do you want to change about it?
Want to check your solution against ours? Check this one out.
Level Up
Below are a few options and some guidance on how you can take your animation to the next level!
Disclaimer: These may not all scientifically represent exactly how rockets work…
Change Directions
In addition to moving the rocket up with translate(), we can rotate the direction it’s facing with rotate(). That code could look like:
transform: translate(450px, -700px) rotate(55deg);
Burn
Could you instruct the browser to change the color of individual pieces of the rocket as it flies through the sky, to make it look like it’s burning?
Hint: You’ll need to write animations for the specific pieces of the rocket, and will need a new keyframe.
Boosters
Could you get the wings (pretend they are boosters) to break off as the rocket leaves the page?
Animations Summary
- The possibilities are endless!
- To create life-like animations, we’d need a lot more than we learned today - both CSS knowledge and application of some physics