Today’s Goals:

• Make fun animations with CSS using Animate.CSS
• Download the correct CSS menu code (if you need it)

 Today’s Featured Site:

• https://spotifymaps.github.io/musicalcities/– Spotify has created a musical map of the world

 Animate.css

• Before we begin let’s quickly look up some ways to create animations for a webpage. What did you find?
• Now, let’s look at some examples
• What’s going on here? What is a class again?
• Let’s look at CSS transforms, animations and keyframes to help understand how the animation is happening.
• Open Notepad++ and start a new webpage with this code
• That page is pretty ugly and annoying. See if you can make something better!
  • You can apply any of the animation classes to any element (your text and picture). You don’t have to make everything infinite. See what happens when you remove infinite. How often and when does the animation happen?
  • Feel free to change the page background color or add a background image. Good color list: http://materialuicolors.co/. Images: https://unsplash.com/, https://stock.tookapic.com/, https://www.pexels.com/, or Bing.com (do image search, then search for free to share and use)
  • Try adding some other images and animating them, too. Frosty needs some friends!
  • See if you can change the Google Font by replacing the style sheet in the head section and the font family in the body.
• Question: How are you able to use the animate.css style sheet?