Completed
Adding motion with CSS transitions
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Motion Design for the Web
Automatically move to the next video in the Classroom when playback concludes
- 1 Welcome to this motion design course
- 2 The basics of motion design for the web
- 3 Adding videos to a web page
- 4 Exercise #1: Product feature with video
- 5 Exercise #2: Hero section with video background
- 6 Optimizing video for web performance
- 7 Introduction to CSS transitions
- 8 Exercise #3: Website header
- 9 Adding motion with CSS transitions
- 10 Exercise #4: Simple dropdown menu
- 11 Exercise #5: Image gallery
- 12 Exercise #6: Cool accordion
- 13 Introduction to CSS animations
- 14 Exercise #7: Simple loading screen
- 15 CSS animations vs. CSS transitions
- 16 Exploring loading animations
- 17 Exercise #8: Site preloader
- 18 Exercise #9: SVG text loader
- 19 Exercise #10: Button with animated loading dots
- 20 Animating illustrations and icons
- 21 Exercise #11: Animated Lottie icon
- 22 Exercise #12: Animated menu icon
- 23 Exercise #13: Animated illustration
- 24 Exercise #14: Animated avatars
- 25 Creating accent animations
- 26 Exercise #15: Animated logo
- 27 Exercise #16: Typewriter effect
- 28 Playing around with interactive animations
- 29 Exercise #17: Mouse follow effect
- 30 Exercise #18: Scroll-triggered animation
- 31 Adding depth and dimension with parallax
- 32 Exercise #19: Parallax animation
- 33 Motion and responsive web design
- 34 Thanks and goodbye!
