Tailwind CSS Classes

Tailwind CSS class .ease-linear / .ease-*

<button class="ease-linear transform hover:scale-125 transition duration-500 bg-teal-400 px-6 py-2 m-6 inline">Hover linear</button>
<button class="ease-in transform hover:scale-125 transition duration-500 bg-teal-400 px-6 py-2 m-6 inline">Hover in</button>
<button class="ease-out transform hover:scale-125 transition duration-500 bg-teal-400 px-6 py-2 m-6 inline">Hover out</button>
<button class="ease-in-out transform hover:scale-125 transition duration-500 bg-teal-400 px-6 py-2 m-6 inline">Hover in out</button>

Preview

Are you tired of writing HTML by hand?

CSS source

.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);
}

More Tailwind CSS classes in Animation category

© 2024 Shuffle. All rights reserved.