`ease-*`

Define la curva de aceleracion de una transicion. linear, in, out, in-out son las opciones principales.

Vista previa

Codigo

ejemplo.html

<div class="flex gap-4">
  <button class="bg-blue-500 hover:translate-x-4 text-white px-4 py-2 rounded transition duration-500 ease-linear transform">linear</button>
  <button class="bg-green-500 hover:translate-x-4 text-white px-4 py-2 rounded transition duration-500 ease-out transform">ease-out</button>
  <button class="bg-red-500 hover:translate-x-4 text-white px-4 py-2 rounded transition duration-500 ease-in-out transform">in-out</button>
</div>