Easing

Default Value

The default easing for all animations is motion-ease-out-quart (cubic-bezier(.165, .84, .44, 1)) if no easing modifier is specified.

Available Values

These are the theme default values. You can customize the theme to add your own values to the motionTimingFunction property or use arbitrary values.

Class	Value
motion-ease	cubic-bezier(0.4, 0, 0.2, 1)
motion-ease-linear	linear
motion-ease-in	cubic-bezier(0.4, 0, 1, 1)
motion-ease-out	cubic-bezier(0, 0, 0.2, 1)
motion-ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)
motion-ease-spring-smooth	var(--motion-spring-smooth)
motion-ease-spring-snappy	var(--motion-spring-snappy)
motion-ease-spring-bouncy	var(--motion-spring-bouncy)
motion-ease-spring-bouncier	var(--motion-spring-bouncier)
motion-ease-spring-bounciest	var(--motion-spring-bounciest)
motion-ease-bounce	var(--motion-bounce)
motion-ease-in-quad	cubic-bezier(.55, .085, .68, .53)
motion-ease-in-cubic	cubic-bezier(.550, .055, .675, .19)
motion-ease-in-quart	cubic-bezier(.895, .03, .685, .22)
motion-ease-in-back	cubic-bezier(0.6,-0.28,0.74,0.05)
motion-ease-out-quad	cubic-bezier(.25, .46, .45, .94)
motion-ease-out-cubic	cubic-bezier(.215, .61, .355, 1)
motion-ease-out-quart	cubic-bezier(.165, .84, .44, 1)
motion-ease-out-back	cubic-bezier(0.18,0.89,0.32,1.27)
motion-ease-in-out-quad	cubic-bezier(.455, .03, .515, .955)
motion-ease-in-out-cubic	cubic-bezier(.645, .045, .355, 1)
motion-ease-in-out-quart	cubic-bezier(.77, 0, .175, 1)
motion-ease-in-out-back	cubic-bezier(0.68,-0.55,0.27,1.55)
motion-ease-[cubic-bezier(0.4, 0, 0.2, 1)]	Arbitrary value

Spring easings don’t work well with properties like opacity or color changes, resulting in unexpected results. Rombo for Tailwind reverts properties like opacity to the default easing when using a spring or bounce easing.

Property-Specific Easing

Apply easing to specific properties using a slash /:

<div class="motion-ease-spring-bouncy/rotate motion-rotate-in-180 motion-opacity-in-0">
  Bouncy rotation, smooth opacity
</div>

Bouncy rotation, smooth opacity

Examples

Spring Animation

<div class="motion-scale-in-0 motion-ease-spring-bouncy">Spring scale</div>

Spring scale

Cubic Bezier

<div class="motion-preset-fade motion-ease-[cubic-bezier(0.4,0,0.2,1)]">
  Custom easing curve
</div>

Custom easing curve

Multiple Properties

<div class="motion-ease-linear/opacity motion-ease-spring-bouncy/rotate motion-opacity-in-0 motion-rotate-in-180">
  Linear fade, bouncy rotation
</div>

Linear fade, bouncy rotation