Cubic Bezier Generator

Curve Editor

Drag the control points to adjust the curve

Control Points

P1 Time

P2 Progression

Animation Preview

Duration (s)

CSS Output

cubic-bezier(0.25, 0.10, 0.25, 1.00)

Presets

Usage in CSS

.element {
  transition: all 1s cubic-bezier(0.25, 0.10, 0.25, 1.00);
}

/* Or in animations */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.element {
  animation: slide 1s cubic-bezier(0.25, 0.10, 0.25, 1.00);
}