Tailwind CSS - Transition Timing Function

Previous
Quiz
Next

Tailwind CSS transition timing function is a utility that lets you apply easing of CSS transitions, enabling smooth and controlled animations.

Tailwind CSS Transition Timing Function Classes

The following is the list of Tailwind CSS Transition Timing Function Classes that are used to apply smooth transition Timing Function.

Class CSS Properties
ease-linear transition-timing-function: linear;
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Functionality of Tailwind CSS Transition Timing Function Classes

  • ease-linear:This class is used to maintain the same speed of transition specified element from start to end.
  • ease-in: This class is used to maintain the speed of transition specified element slow in start and fast in end.
  • ease-out: This class is used to maintain the speed of transition specified element fast in start and slow in end.
  • ease-in-out: This class is combination of ease-in and ease-out classes mainly sets the default speed of transition specified element.

Tailwind CSS Transition Timing Function Example

The following example will illustrate the different transitional effects on specified transition Timing Function.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-green-100">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Transition Timing Function  Classes 
    </h2>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-linear hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-linear
            </button>
        </div>
        <div>
                <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-in hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-in
            </button>
        </div>
        <div>
                <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-out hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-out
            </button>
        </div>
        <div>
                <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-300 ease-in-out hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :ease-in-out
            </button>
        </div>
    </div>
</body>
</html>
Print Page
Previous
Next