An Interactive Guide to CSS Transitions • Josh W. Comeau

This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteractions and other animations.

Introduction The world of web animations has become a sprawling jungle of tools and technologies. Libraries like GSAP and Framer Motion and React Spring have sprung up to help us add motion to the DOM. The most fundamental and critical piece, though, is the humble CSS transition. It's the first animation tool that most front-end devs learn, and it's a workhorse. Even the most grizzled, weathered animation veterans still reach for this tool often. There's a surprising amount of depth to this topic. In this tutorial, we'll dig in and learn a bit more about CSS transitions, and how we can use the

related reading

• Transitionsanimations.dev
• Building a Magical 3D Button with HTML and CSS • Josh W. Comeaujoshwcomeau.com
• Inside Framer's Magic Motionnan.fyi
• Details That Make Interfaces Feel Betterjakub.kr
• On UI Animations - Shu Dingshud.in
• animations.devanimations.dev
• will-change in CSSjakub.kr
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• 7 Practical Animation Tipsemilkowal.ski
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• Animating height: auto — nemzes.netnemzes.net
• Interactive SVG Animationssvg.guide