CSS Transition Generator

Create smooth CSS transitions for hover effects, focus states, and interactive elements. Generate transition code with custom duration, easing, and delay.

What is a CSS Transition?

CSS transitions enable smooth animation between property values when an element's state changes. Unlike @keyframes animations that run automatically, transitions respond to user interactions like hovering, clicking, or focus events.

Transition Properties

transition-property

Specifies which CSS properties to animate (all, transform, opacity, etc.)

transition-duration

How long the transition takes (e.g., 0.3s, 500ms)

transition-timing-function

Speed curve: ease, ease-in-out, linear, cubic-bezier

transition-delay

Wait time before transition starts

Common Transition Examples

Button Hover Effect

.button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

Card Lift Effect

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}

Convert Transitions to Keyframes

Need to turn your CSS transition into an automatic @keyframes animation? Use our free converter tool with visual easing editor.

Open Transition to Keyframe Tool

CSS Animation & Keyframe Generator