consolelog.tools logo

Transition Duration Calculator

Calculate optimal transition durations and timing functions

Calculated Duration

200ms
(0.2s)

Configuration

- OR -
- OR -

Recommendations

✅ Good duration - feels responsive and smooth
✅ ease-out is great for elements entering the viewport
💡 For buttons, keep it snappy (100-200ms)

Code Examples

/* CSS */
.element {
  transition: all 200ms ease-out;
}

.element:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

Cubic Bezier Presets

Linear
Constant speed throughout
Best for: Continuous animations, progress bars
0, 0, 1, 1
Ease
Slow start and end, faster middle
Best for: General purpose transitions
0.25, 0.1, 0.25, 1
Ease In
Starts slow, accelerates
Best for: Elements leaving viewport
0.42, 0, 1, 1
Ease Out
Starts fast, decelerates
Best for: Elements entering viewport
0, 0, 0.58, 1
Ease In Out
Slow start and end
Best for: Symmetrical animations
0.42, 0, 0.58, 1
Material Deceleration
Material Design deceleration curve
Best for: Material UI elements entering
0, 0, 0.2, 1
Material Acceleration
Material Design acceleration curve
Best for: Material UI elements leaving
0.4, 0, 1, 1
Material Standard
Material Design standard curve
Best for: Material UI general transitions
0.4, 0, 0.2, 1
iOS Curve
Apple/iOS default timing
Best for: iOS-style interfaces
0.4, 0, 0.6, 1
Bounce
Overshoots then settles
Best for: Playful interactions
0.68, -0.55, 0.265, 1.55
Elastic
Spring-like elastic effect
Best for: Attention-grabbing animations
0.6, -0.28, 0.74, 0.05
Smooth
Very smooth acceleration
Best for: Smooth scrolling, panning
0.25, 0.46, 0.45, 0.94

Quick Presets

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Frequently Asked Questions - Transition Duration Calculator