CSS Transitions

What is a CSS Transition?

A CSS transition smoothly animates a property change over a specified duration. It’s perfect for simple interactive effects like hover states, focus outlines, and UI feedback.

.box {
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.box:hover {
  background-color: #ff6b6b;
  transform: scale(1.2);
}

Live Demo

Key Transition Properties

• transition-property – Which CSS property to animate.
• transition-duration – How long the animation lasts.
• transition-timing-function – Speed curve of the animation.
• transition-delay – Time to wait before starting.

Best Practices

1. Prefer transform and opacity for smoother performance.
2. Use will-change sparingly to hint the browser.
3. Keep durations short (<0.2‑0.4s) for UI responsiveness.