Today’s goals:

• Review block, inline, and inline-block on puppy page (this is also a good review)
• Make fun animations with CSS using Animate.CSS

 Today’s featured website:

• http://khaledipsum.com/– Instead of using the more traditional Latin gibberish that web developers use (Lorem ipsum dolor…), use DJ Khaled when you need to use text as a place-holder!

 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. You don’t have to make everything infinite. See what happens when you remove infinite. How often and when does the animation happen?
• See if you can add your own animations by grabbing some code from the transforms, animations, or keyframes examples above.
• How are you able to use the animate.css style sheet?
• Check out more fun CSS animations (not made with Animate.css)