Add to your project: npx @webspire/cli add easing/tokens
spring
bounce
elastic
BG:

Quick Start

.btn { transition: transform 0.3s var(--ease-spring); }

Details

Tailwind
v4.x
Browser
baseline-2024
Size
420 bytes · 11 lines
Custom Properties
--ease-spring--ease-bounce--ease-elastic--ease-smooth--ease-snappy--ease-in-expo--ease-out-expo--ease-in-out-back
easing timing cubic-bezier spring bounce tokens

Professional timing functions as CSS custom properties. Drop these into :root and use them anywhere with var().

With Tailwind v4

Register them in your @theme block to use as Tailwind utilities:

@theme {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Then use: transition-all duration-300 ease-spring

Interactive button with Tailwind

<button class="rounded-xl bg-white px-6 py-3 text-sm font-semibold
               text-black shadow-lg
               hover:scale-105 hover:shadow-xl
               active:scale-95
               transition-all duration-300"
        style="transition-timing-function: var(--ease-spring)">
  Click me
</button>

Hover card with bounce

<a class="block rounded-xl border border-white/10 bg-white/5 p-6
          hover:-translate-y-1 hover:bg-white/10
          transition-all duration-300"
   style="transition-timing-function: var(--ease-bounce)"
   href="#">
  <h3 class="font-semibold text-white">Feature</h3>
  <p class="mt-2 text-sm text-white/60">Hover me.</p>
</a>