Transitions & Animations — Roadmap Step & Resources
CSS transitions, keyframe animations and transform
- Level: beginner
- Estimated time: 1 days
- Roadmap: Next.js Full Stack
Before this step
Mini projects
- Add hover transitions and a loading spinner animation
Study resources
- Using CSS transitions (Article) — MDN's official reference for the transition property and its timing functions.
- Using CSS Animations (Article) — MDN's dedicated guide to configuring @keyframes, animation-duration, and animation easing curves.
- CSS Transitions and Animations Crash Course (Video) — Traversy Media explains hover transitions, keyframe stages, delays, and animation choreographies.
Part of
- CSS — section
- Next.js Full Stack roadmap — the full learning path