Now, it's time to practice your understanding of the CSS: Transitions.

Clone the practice from the starter.

Once you've in VS Code, you can drag the index.html file into your browser to view the webpage, or use the File Explorer to open it in your browser. The only file you will need to edit for this practice is main.css.

Remember to save the CSS file and refresh the page in the browser whenever you make changes.

You will begin with a web page that has all of the HTML and a little CSS completed. You only need to add to the CSS to complete each phase.

The first step is to use the CSS transition transform. Your goal is to rotate the rocket 250 degrees when you hover over it. Follow the instructions and use the gif as an example.

Hint: The MDN docs for transform and MDN docs for hover or other online resources may help.

The next step is to use the CSS transition transform to move the astronaut element 100 pixels on the x axis when you hover over it. Follow the instructions and use the gif as the targeted example.

Hint: The MDN docs for translate or other online resources may help.

The last step is to use what you have larned about transitions to create a continuously fluid spinning animation. Follow the instructions in the bonus section to create a smooth 360 deg spinning Earth.

Hint: The MDN docs for animation or other online resources may help.

Congratulations! You have successfully practiced how to use the core css stlyes associated with CSS: Transitions. This includes setting

• transition
• transform
• rotate
• translate
• animation