CSS transitions allow smooth animation between changes in CSS properties. Instead of abrupt changes, transitions let properties animate over time.

• 🔸 transition - Shorthand property for all transition properties
• 🔸 transition-property - Specifies which property will animate
• 🔸 transition-duration - Defines how long the animation takes
• 🔸 transition-timing-function - Controls animation speed curve
• 🔸 transition-delay - Delays the start of the transition

A simple example animating width and height on hover.

Use transition: all 2s ease-in-out to animate all properties at once.

Applies a slow start and end. This improves user experience with subtle easing.