Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Level Up your CSS Animation Skills
Module 1: Build an animated hero header
Hero header? (2:36)
Animating the background (12:56)
Introducing the titles (9:59)
Adding a scroll cue (8:26)
Simplifying keyframes (5:20)
Waiting till the content is ready (8:43)
Examples to download (1:02)
[Bonus download] How to build your own Hero Header
Module 2: Make our designs feel alive with touch and hover animations
Touch and hover animations (1:38)
Animating links (12:26)
Animating tooltips (11:11)
Revealing content on hover (11:38)
Animating buttons (8:59)
Examples to download (1:02)
Module 3: Grabbing attention with scroll animations
Scroll animations (1:50)
Animating content on scroll (14:52)
Animating a slide-in banner (6:17)
Parallax scrolling (10:57)
Mouse-leave animation (10:40)
Examples to download (1:02)
Module 4: Build an animated carousel
Carousels (1:49)
Carousel HTML (6:36)
Carousel CSS (12:41)
Setting up JavaScript (9:59)
Making it work (16:12)
Finishing touches (6:40)
Examples to download (1:00)
Module 5: Adjusting animations for all screen sizes
Responsive animations (1:43)
Resizing animations using font-size (8:50)
Percentages and viewport units (6:01)
Landscape vs portrait (6:39)
Congratulations! (plus bonus links and resources)
Next steps and inspiration
Thanks, and stay in touch!
Examples to download
Download
Download
01.zip
Complete and Continue