CSS Transitions

Smooth state changes that make your UI feel alive. Master the art of animating between CSS property values with timing, easing, and performance in mind.

Transition Basics

Transitions let you smoothly animate changes between CSS property values. Instead of an instant jump from one state to another, transitions create a smooth visual flow that feels natural and polished.

Basic Transition

Hover me!

The transition property is shorthand for four individual properties:

transition-property: Which CSS properties to animate (or all)
transition-duration: How long the transition takes (e.g., 0.3s)
transition-timing-function: The easing curve (e.g., ease, linear)
transition-delay: Wait time before starting (default: 0s)

css

Timing Functions

Timing functions control the acceleration curve of your transition. They determine whether the animation starts slow and speeds up, or starts fast and slows down.

Timing Function Comparison

linear

ease

ease-in

ease-out

ease-in-out

Choosing the Right Timing Function

linear: Constant speed — good for continuous motion like loading spinners
ease: Starts fast, ends slow — the default, works for most cases
ease-in: Starts slow, accelerates — good for objects exiting the screen
ease-out: Starts fast, decelerates — good for objects entering the screen
ease-in-out: Slow start and end — good for attention-grabbing effects

css

Transitioning Multiple Properties

You can transition multiple properties at once, each with its own duration and timing. This creates rich, layered effects that feel premium and well-crafted.

Multi-Property Transition

Hover Me

Multiple properties transition together

Pro tip: While transition: all is convenient during prototyping, it's better to specify individual properties in production. This gives you fine control over timing and avoids unintended transitions on properties you didn't mean to animate.

css

Real-World Examples

Transitions shine in everyday UI patterns. Here are some practical applications you'll use constantly.

Button Hover States

css

Navigation Menus

css

Image Hover Effect

View Details

css

Transition Delays & Staggering

The transition-delay property lets you wait before starting a transition. This is perfect for creating staggered animations where elements appear one after another.

Staggered Transitions

Hover over the container to see staggered transitions

css

Performance & Best Practices

Not all CSS properties are created equal when it comes to animation performance. Some trigger expensive layout recalculations, while others can be GPU-accelerated for buttery smooth transitions.

Reduced Motion & Performance

Prefer (GPU-accelerated)

transform — translate, scale, rotate, skew
opacity — fade in/out effects

Avoid Animating (Expensive)

width / height — triggers layout recalculation
top / left — use transform: translate() instead
margin / padding — affects layout

When to Use Transitions vs Animations

Use Transitions when: You're animating between two states (like hover effects, toggles, or UI feedback).

Use Animations when: You need complex, multi-step sequences, looping effects, or animations that start automatically. Check out the Animations page for more on keyframe animations.

css

Before & After Comparison

See transition effects side by side. Toggle between the resting state and the transitioned state for each property type.

GPU-accelerated transform with scale, rotation, and translation

Box

.element {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.element:hover {
    transform: scale(1.15) rotate(5deg) translateY(-8px);
}

Continue Your Journey

Transitions mastered! Explore animations for multi-step motion sequences.

CSS Animations

Multi-step keyframe sequences and looping effects

Filters & Effects

Transition filter effects for creative hover states

Search pages