Back to Tools

Animation Easing Studio

Interactive CSS timing functions with live preview

0 tests

Easing Functions

20
Linear
Constant speed throughout
linear
Ease
Default browser easing
ease
Ease In
Slow start, fast end
ease-in
Ease Out
Fast start, slow end
ease-out
Ease In Out
Slow start and end
ease-in-out
Ease In Sine
Gentle sine curve in
cubic-bezier(0.12, 0, 0.39, 0)
Ease Out Sine
Gentle sine curve out
cubic-bezier(0.61, 1, 0.88, 1)
Ease In Out Sine
Gentle sine curve both
cubic-bezier(0.37, 0, 0.63, 1)
Ease In Quad
Quadratic acceleration
cubic-bezier(0.11, 0, 0.5, 0)
Ease Out Quad
Quadratic deceleration
cubic-bezier(0.5, 1, 0.89, 1)
Ease In Out Quad
Quadratic both directions
cubic-bezier(0.45, 0, 0.55, 1)
Ease In Cubic
Strong cubic acceleration
cubic-bezier(0.32, 0, 0.67, 0)
Ease Out Cubic
Strong cubic deceleration
cubic-bezier(0.33, 1, 0.68, 1)
Ease In Out Cubic
Strong cubic both directions
cubic-bezier(0.65, 0, 0.35, 1)
Ease In Quart
Very strong acceleration
cubic-bezier(0.5, 0, 0.75, 0)
Ease Out Quart
Very strong deceleration
cubic-bezier(0.25, 1, 0.5, 1)
Ease In Out Quart
Very strong both directions
cubic-bezier(0.76, 0, 0.24, 1)
Ease In Back
Pulls back before moving
cubic-bezier(0.36, 0, 0.66, -0.56)
Ease Out Back
Overshoots then settles
cubic-bezier(0.34, 1.56, 0.64, 1)
Ease In Out Back
Pulls back and overshoots
cubic-bezier(0.68, -0.6, 0.32, 1.6)

Custom Easing

Animation Preview

Linear — Constant speed throughout

Start (0%)linearEnd (100%)

Generated Code

.animated-element {
  transition: all 500ms linear;
}

@keyframes slideAnimation {
  from { transform: translateX(0); }
  to { transform: translateX(0px); }
}

.slide-animation {
  animation: slideAnimation 500ms linear forwards;
}