Level Up Your CSS Animation Skills

Level Up Your CSS Animation Skills

CSS Animation via YouTube Direct link

1.1: Build an animated hero header

1 of 30

1 of 30

1.1: Build an animated hero header

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

Level Up Your CSS Animation Skills

Automatically move to the next video in the Classroom when playback concludes

  1. 1 1.1: Build an animated hero header
  2. 2 1.2: Animating the background
  3. 3 1.3: Introducing the titles
  4. 4 1.4: Adding a scroll cue
  5. 5 1.5: Simplifying keyframes
  6. 6 1.6: Waiting till the content is ready
  7. 7 1.7: Animated Hero Header Examples to download
  8. 8 2.1: Touch and hover animations
  9. 9 2.2: Animating Links
  10. 10 2.3: Animated tooltips
  11. 11 2.4: Revealing content on hover
  12. 12 2.5: Animating buttons
  13. 13 2.6: Downloads: Touch and hover animation examples
  14. 14 3.1: Scroll Animations
  15. 15 3.2: Animating content on scroll
  16. 16 3.3: Animating a slide-in banner
  17. 17 3.4: Parallax Scrolling
  18. 18 3.5: Mouse-leave animation
  19. 19 3.6: Download examples: Scroll animations
  20. 20 4.1: Carousels
  21. 21 4.2: Carousel HTML
  22. 22 4.3: Carousel CSS Styling
  23. 23 4.4: Carousel JavaScript (Setting it up)
  24. 24 4.5: Making the carousel work (JS/HTML/CSS)
  25. 25 4.6: Carousel finishing touches
  26. 26 4.7: Carousel examples to download
  27. 27 5.1: Responsive Animations
  28. 28 5.2: Resizing animations using font-size
  29. 29 5.3: Percentages and viewport units
  30. 30 5.4: Landscape vs portrait

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.