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
• Details That Make Interfaces Feel Betterjakub.kr
• The Easing Blueprintanimations.dev
• On UI Animations - Shu Dingshud.in
• 7 Practical Animation Tipsemilkowal.ski
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• will-change in CSSjakub.kr
• Mediumuxdesign.cc
• Building a Magical 3D Button with HTML and CSS • Josh W. Comeaujoshwcomeau.com
• Good vs Great Animationsemilkowal.ski
• Details That Make Interfaces Feel Betterinterfaces.dev