CSS Animation Courses and Certifications

CSS Animation Tutorial

1 rating

Learn to create interactive website effects with CSS transforms, transitions, keyframes, timing functions, and chained animations.

• YouTube
• 1 hour 30 minutes
• Self-Paced
• Free Video

Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

Create an accessible skeleton loader from scratch with CSS animations, reduced-motion support, and WAI-ARIA attributes.

• egghead.io
• 5 minutes
• Self-Paced
• Free Online Course

Web Dev Simplified

Can I Create This Very Complex CSS Animation?

Build a complex Prettier logo animation from scratch with HTML and CSS, including load and swipe effects.

• YouTube
• 1 hour 7 minutes
• Self-Paced
• Free Video

Web Dev Simplified

Creating a Simple CSS Hover Animation

Create a split-text hover animation using only CSS and one HTML element per text item, working through the design and debugging process.

• YouTube
• 42 minutes
• Self-Paced
• Free Video

Kevin Powell

CSS Card With Hover Animation and Mobile Fallback

Build a CSS-only animated card that handles hover, keyboard navigation, mobile devices, and reduced-motion preferences.

• YouTube
• 49 minutes
• Self-Paced
• Free Video

Kevin Powell

Customizable Typewriter Animation With CSS

Build a customizable typewriter effect using only CSS, with a stepped text reveal, blinking caret, and custom properties.

• YouTube
• 19 minutes
• Self-Paced
• Free Video

Mike Dane

Build a CSS Star Animation

Build a rotating CSS animation from squares using absolute positioning, transforms, keyframes, and Flexbox.

• YouTube
• 22 minutes
• Self-Paced
• Free Video

Kevin Powell

Creating a Diamond Grid with CSS and Animation

Learn to create an eye-catching diamond grid using CSS, including advanced techniques for shape manipulation, animations, and hover effects to enhance your web design skills.

• YouTube
• 26 minutes
• Self-Paced
• Free Video

Web Dev Simplified

How to Create This Unbelievable CSS Scroll Animation

Recreate a scroll-based web animation mostly with CSS, using a JavaScript scroll variable and IntersectionObserver for image reveals.

• YouTube
• 35 minutes
• Self-Paced
• Free Video

Kevin Powell

Creating an Infinite Horizontal Scroll Animation - CSS Tutorial

Learn to create an accessible infinite horizontal scroll animation using CSS and JavaScript, with options for speed and direction while respecting user preferences for reduced motion.

• YouTube
• 32 minutes
• Self-Paced
• Free Video

Learn CSS Animations: Interactive Course | Scrimba

Learn how to make your websites come alive with CSS animations. This course gives you a solid foundation with real-world coding challenges.

• Scrimba
• 2 hours 2 minutes
• Self-Paced
• Paid Course

Web Conferences Amsterdam

Getting Creative with Keyframes - CSS Animation Synchronization Techniques

Explore advanced CSS animation techniques for synchronizing multiple objects with complex keyframes, durations, and timing functions. Learn practical strategies for creating intricate, coordinated animations.

• YouTube
• 42 minutes
• Self-Paced
• Free Video

Level Up Your CSS Animation Skills

2 ratings

Create animated web interfaces with CSS, including hero headers, hover effects, scroll and parallax animations, carousels, and responsive motion.

• YouTube
• 3 hours 30 minutes
• Self-Paced
• Free Video

Creative Advanced CSS & JavaScript Animations - 150 Projects

2493 ratings at Udemy

Master Advanced CSS & JavaScript Animations, Transitions and Transforms And Practice with 150 Creative Projects!

• Udemy
• 20 hours 26 minutes
• Self-Paced
• Paid Course

Scrimba

Learn CSS Animations

Build user-friendly, cross-browser animations with the CSS properties behind them, practicing through coding challenges modeled on scenarios developers meet daily.

• Coursera
• 2 hours 32 minutes
• Self-Paced
• Paid Course