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
Lesson Content Locked
Your session expired. Please sign in again to continue.
Login