Pure CSS Animations - Make a cool button, a sliding modal, and a product page! (No Javascript)

AJ Burt, Learning is Living Better

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (29m)
    • 1. Quick Examples for Fast Learning

      0:53
    • 2. What Your Need for This Class

      1:06
    • 3. Animating Buttons, Background, and Text

      6:00
    • 4. Take Up Less Space with Image Hover Effects

      6:07
    • 5. Animated Modals with Pure HTML/CSS

      3:59
    • 6. Codepen Copycat: Transforming with CSS

      8:50
    • 7. Dress Up Your Animations with Cubic Bezier!

      1:59
    • 8. Next Steps!

      0:23

Project Description

Make Something Move

All the Examples can be found in this collection as well as in the individual notes for each video.

For your project, you'll want to include:

  • All completed examples with links
  • One example that you've expanded upon/embellised OR
  • Implement one of the animations we've covered on a webpage you've already made

I'll be posting my favorite project from each both both here and on my Twitter with a link to a social profile/website of your choosing.

Have fun, and let me know if you have any questions!

-AJ