CSS Transitions Tutorial for Beginners

What Are CSS Transitions?

CSS transitions are a property that allows you to change property values smoothly over a given duration. When you hover over a button and it slowly changes color instead of snapping — that's a transition. The core idea is simple: specify which property to animate, how long the animation should take, and optionally the timing function and delay.

The transition shorthand: transition: property duration timing-function delay;. Each part controls a different aspect of the animation. You can apply transitions to color, background, width, height, transform, opacity, and many other CSS properties.

Transition Properties Explained

The transition-property specifies which CSS property to animate. Use all to animate all changing properties, or be specific: opacity, background-color, transform. Being specific is better for performance.

transition-duration sets how long the animation takes, in seconds (0.3s) or milliseconds (300ms). Typical UI transitions use 200-400ms for natural-feeling interactions. transition-timing-function controls the acceleration curve. Options include ease (default), linear, ease-in, ease-out, and ease-in-out. You can also create custom curves with cubic-bezier().

transition-delay adds a pause before the animation starts. Use it to create staggered effects or wait for other animations to finish.

Practical Button Hover Example

A common use case is button hover effects. Define the base state with default colors, then the hover state in :hover. Add a transition to the base state:

.btn { background: #4f46e5; color: white; padding: 12px 24px; border: none; border-radius: 6px; transition: all 0.3s ease; cursor: pointer; }
.btn:hover { background: #4338ca; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79,70,229,0.4); }

The transition makes the hover effect smooth rather than instant. Experiment with different durations and timing functions to find the right feel.

Multiple Transitions on One Element

You can transition multiple properties with different settings. Separate each transition with a comma:

.card { background: white; transform: scale(1); opacity: 1; transition: transform 0.3s ease, background 0.2s ease-in, opacity 0.4s ease-out; }
.card:hover { transform: scale(1.05); background: #f0f4ff; opacity: 0.95; }

Each property animates with its own duration and timing function. This gives you fine-grained control over complex animations.

Transitioning Transform and Opacity

For best performance, prefer transitioning transform and opacity over properties like width, height, or top/left. The browser can animate transform and opacity on the GPU without triggering layout recalculations. This means smoother 60fps animations.

Compare: transition: transform 0.3s ease (GPU-accelerated) vs transition: width 0.3s ease (triggers layout). For hover cards, modals, and slide-in panels, always prefer transform-based animations.

Creating Staggered Animations

Use transition-delay to create staggered effects where elements animate one after another. Combine with :nth-child selectors:

.item { opacity: 0; transform: translateY(20px); transition: all 0.4s ease; }
.item:nth-child(1) { transition-delay: 0s; }
.item:nth-child(2) { transition-delay: 0.1s; }
.item:nth-child(3) { transition-delay: 0.2s; }
.list:hover .item { opacity: 1; transform: translateY(0); }

Each item fades in with a slight delay, creating a polished cascading effect. This technique works great for navigation menus, card grids, and list animations.

Common Transition Patterns

Fade in: opacity: 0 → 1 with 0.3s ease. Slide down: transform: translateY(-10px) → translateY(0). Scale up: transform: scale(1) → scale(1.1). Color shift: background-color or color transitions for links and buttons.

Card hover: Combine translateY, box-shadow, and scale for a lifting effect. Accordion: Transition max-height for smooth expand/collapse. Modal: Transition opacity and transform together for a professional overlay effect.

Performance Tips and Best Practices

Always set transitions on the base state (not just the hover state) so the animation works both entering and leaving. Avoid transitioning auto values — use explicit dimensions. Use will-change sparingly for known animations: will-change: transform, opacity.

Keep durations between 200-500ms for natural-feeling UI. Test on mobile devices where animations can feel different due to lower refresh rates. Use prefers-reduced-motion: reduce media query to disable animations for users with motion sensitivity.