Frontend Animation & Motion Design with CSS and Framer Motion

A two-week intensive roadmap to master fundamental and advanced CSS animations, transitions, and an introduction to modern animation libraries like Framer Motion for creating dynamic and engaging user interfaces.

Topics

1.1

CSS Transitions

22 minutes

1.2

CSS Transforms

1.3

CSS Keyframe Animations

8 minutes

1.4

Easing Functions

16 minutes

Study Resources

→MDN Web Docs: CSS Transitions →MDN Web Docs: CSS Transforms →CSS Transitions vs Animations - What's the difference? (Kevin Powell)

How It Works

Learn

Study curated videos and articles

Practice

Solve problems, build things

Verify

Submit your work as proof

Identity

Get a verified skill on your profile

References

1.MDN Web Docs: CSS Transitions↗

2.MDN Web Docs: CSS Transforms↗

3.CSS Transitions vs Animations - What's the difference? (Kevin Powell)↗

4.Framer Motion Documentation: Getting Started↗

5.CSS-Tricks: Animating SVG with CSS↗

6.High Performance Animations (Google Developers)↗

Frontend Animation & Motion Design with CSS and Framer Motion

CSS Animations & Transitions Fundamentals

Topics

Study Resources

Advanced CSS Animations & Introduction to Framer Motion

How It Works

References