CSS Transitions: Theory & Interactive Examples

What are CSS Transitions?

CSS transitions enable smooth, animated changes between property values, making web interfaces feel more dynamic and responsive. They are triggered by state changes (like :hover, :focus, or class changes) and are ideal for simple, one-step animations. Transitions are hardware-accelerated in modern browsers, making them efficient and performant.

How CSS Transitions Work

transition-property: The CSS property to animate (e.g., background-color, width).
transition-duration: How long the transition takes (e.g., 0.5s).
transition-timing-function: The speed curve of the transition (e.g., ease, linear, ease-in, cubic-bezier).
transition-delay: How long to wait before starting the transition (e.g., 0.2s).
transition: Shorthand for all the above.

Shorthand: transition: property duration timing-function delay;
Example: transition: background-color 0.5s ease 0.2s;

Animatable Properties

Not all CSS properties can be transitioned. Common animatable properties include color, background, opacity, width, height, transform, box-shadow, border-radius, and margin. Properties like display and position are not animatable.

Transition Timing Functions

ease: Starts slow, speeds up, then slows down (default)
linear: Constant speed
ease-in: Starts slow, then speeds up
ease-out: Starts fast, then slows down
ease-in-out: Starts and ends slow
cubic-bezier: Custom curve for advanced control
steps(): Jumps between steps for choppy effects

Try using cubic-bezier for unique, custom motion curves!

Interactive Examples

1. Basic Color Transition

Hover me!

.box {
  transition: background-color 0.5s;
}
.box:hover {
  background-color: #8e44ad;
}

2. Multiple Properties

Hover me!

.box {
  transition: width 0.5s, background 0.5s;
}
.box:hover {
  width: 220px;
  background: rgba(142, 68, 173, 0.6);
}

3. Timing Functions

ease

linear

ease-in

ease-out

ease-in-out

.timing-ease { transition: transform 0.6s ease; }
.timing-linear { transition: transform 0.6s linear; }
.timing-ease-in { transition: transform 0.6s ease-in; }
.timing-ease-out { transition: transform 0.6s ease-out; }
.timing-ease-in-out { transition: transform 0.6s ease-in-out; }
.box:hover { transform: scale(1.2); }

4. Transition Delay

Hover me!

.box {
  transition: background 0.5s ease 0.5s;
}
.box:hover {
  background: #f7971e;
}

5. All Properties + Cubic Bezier

Hover me!

.box {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.box:hover {
  background: #ffd200;
  color: #222;
  border-radius: 50px;
  width: 220px;
}

6. Opacity Fade

Hover me!

.fade-demo {
  transition: opacity 0.6s;
}
.fade-demo:hover {
  opacity: 0.3;
}

7. Border Radius Morph

Hover me!

.radius-demo {
  transition: border-radius 0.5s;
}
.radius-demo:hover {
  border-radius: 50%;
}

8. Box Shadow Transition

Hover me!

.shadow-demo {
  transition: box-shadow 0.4s;
}
.shadow-demo:hover {
  box-shadow: 0 8px 32px 0 #8e44ad;
}

9. Steps Timing Function

Hover me!

.steps-demo {
  transition: background 1s steps(4);
}
.steps-demo:hover {
  background: #e74c3c;
}

10. Image Zoom & Brightness

.img-transition-demo {
  width: 100%;
  max-width: 220px;
  border-radius: 10px;
  transition: transform 0.5s cubic-bezier(.4,1.6,.4,1), filter 0.5s, box-shadow 0.5s;
  filter: brightness(0.95) contrast(1);
}
.img-transition-demo:hover {
  transform: scale(1.13) rotate(-2deg);
  filter: brightness(1.15) contrast(1.1);
}

Tip: Hover over the boxes to see the transitions in action! Try combining transitions for creative effects.

Best Practices & Notes

Only animatable properties can be transitioned (e.g., color, background, transform, opacity).
Use transition for simple, state-based animations (e.g., :hover, :focus).
For complex, multi-step animations, consider @keyframes and animation.
Keep transitions short and subtle for best user experience.
Test transitions on different devices and browsers for consistency.
Avoid using transition: all. Explicitly list properties for better performance.
Use will-change sparingly for performance optimization on heavy transitions, as overuse can harm performance.

Further Exploration

Combine transitions with :focus and :active for accessibility.
Experiment with cubic-bezier and steps() for custom effects.
Use transitions to provide visual feedback for UI elements (buttons, cards, menus, etc.).