X1:
Y1:
X2:
Y2:

Animation Preview

Easing Value

cubic-bezier(0.25, 0.1, 0.25, 1)

CSS Code

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

/* Or with animation */
.animated {
  animation: myAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes myAnimation {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  to {
    transform: translateX(100px);
    opacity: 1;
  }
}

JavaScript Code

// Using Web Animations API
element.animate([
  { transform: 'translateX(0)', opacity: 0 },
  { transform: 'translateX(100px)', opacity: 1 }
], {
  duration: 1000,
  easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
  fill: 'forwards'
});

// GSAP (if using)
gsap.to(element, {
  x: 100,
  opacity: 1,
  duration: 1,
  ease: "power2.out" // GSAP uses different easing names
});

Saved Easings

No saved easings yet

Easing Function Tips

  • Cubic-bezier: Control points define the curve shape. X values must be 0-1, Y values can go beyond for bounce effects.
  • Ease-out: Fast start, slow end - great for elements entering the screen.
  • Ease-in: Slow start, fast end - ideal for elements leaving the screen.
  • Ease-in-out: Balanced acceleration - perfect for toggling states.
  • Steps: Creates discrete jumps - useful for sprite animations or clock ticks.
  • Back easings: Overshoot and return - adds a natural, bouncy feel.
  • Performance: Use CSS transitions for simple animations, JS for complex sequencing.