Tailwind CSS - Transition Timing Function

Modern Guide to Transition Timing Functions

In Tailwind CSS, transition timing functions, also known as “easing functions,” control the acceleration and deceleration of an element’s transition. They allow you to create animations that feel natural and polished rather than stiff and robotic.

Core Easing Utilities

To use an easing function, you must also apply transition and duration-* utilities to the element. The easing class dictates how the transition progresses over its specified duration.

Class	CSS transition-timing-function	Description
ease-linear	linear	A constant speed from start to end. Best for mechanical or unnatural movements.
ease-in	cubic-bezier(0.4, 0, 1, 1)	Starts slow and accelerates. Good for elements animating into the screen.
ease-out	cubic-bezier(0, 0, 0.2, 1)	Starts fast and decelerates. The most common choice for UI interactions as it feels responsive.
ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)	Starts slow, accelerates through the middle, and then slows down at the end. Best for animations where an element moves from one point to another.

Practical Application: Comparing Easing on UI Cards

The best way to understand easing is to see it in action. The following example displays four cards. When you hover over each one, it will scale up and change its shadow. Each card uses a different timing function, allowing you to visually compare the effect on the animation’s ‘feel’.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition Timing Functions</title>
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-200 dark:bg-slate-900 p-8">

    <div class="text-center mb-10">
        <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100">Compare Easing Functions</h1>
        <p class="text-slate-600 dark:text-slate-400">Hover over the cards to see the difference.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- Card Template -->
        <div class="card ease-linear">ease-linear</div>
        <div class="card ease-in">ease-in</div>
        <div class="card ease-out">ease-out</div>
        <div class="card ease-in-out">ease-in-out</div>
    </div>

    <!-- CSS can be abstracted using @apply in your input CSS for cleaner HTML -->
    <style>
      .card {
        @apply bg-white dark:bg-slate-800 rounded-lg shadow-md p-8 flex items-center justify-center font-mono text-slate-700 dark:text-slate-300 transition-all duration-500 hover:shadow-2xl hover:scale-105 hover:text-indigo-500;
      }
    </style>

</body>
</html>

Pro Tip: The Psychology of Easing

The choice of easing function can subtly influence how users perceive your interface:

• ease-out: Feels quick and responsive because the animation starts immediately. This is an excellent default for most UI interactions like button presses or modal pop-ups.
• ease-in: Can feel sluggish if used for user-initiated actions, but is effective for elements that are entering the scene automatically.
• ease-in-out: Looks more deliberate and elegant. Ideal for longer, more pronounced animations where an element moves across the screen.

Common Errors & Debugging

The most common mistake is forgetting to add the necessary transition and duration-* classes. An easing function class like ease-out has no effect on its own. It only modifies an existing transition.

Incorrect: <div class="hover:scale-110 ease-out">...</div> (Missing transition and duration)

Correct: <div class="transition duration-300 ease-out hover:scale-110">...</div>