Client: Demo of CSS and Javascript Animation
Date: April 28, 2015
Categories: Animation / HTML
This is a combination of CSS and Javascript animation to show my proficiency with both for the client that wants more animation in their sites. To make the rocket move, you hover the mouse over the “Hover Me!” button to get the rocket to fly up off the screen. CSS is used to accomplish this with a cubic-bezier curve to vary the speed of the animation so the rocket accelerates. If you hover the mouse over the “Blast Off” text, it bubbles as seen in the images based on where the mouse pointer is. I also used the CSS cubic bezier feature and a fade-in to make the text appear to bounce when the site initially loads.