Animations ft. Tailwind CSS

Animations play an important role in the design of any website or a specific component. Not only it makes the design more interactive but it also helps to give a better user experience.

CSS provides us with various properties and functions we can use to animate component in any way we like to. Many external 3rd party libraries help us with the animation of the component.
All of this sounds easy which in fact is, but you have to keep practising for that to get used to it. While many other external libraries make our way easy in animations easy, we don't have to worry about that as we will be using Tailwind CSS.

Tailwind CSS provides us with the concise predefined code that animates our content in just a few words of code. Don't believe me?
Let's just dive into the animation utility classes and get started.

<div class="flex items-center min-h-screen flex-col justify-center space-y-14">
<button class="relative flex p-2  text-gray-50 font-semibold bg-gray-800 rounded">
Message
<span class="absolute h-3 w-3 rounded-full bg-green-400 -top-1 -right-1 flex ">
<span class="h-3 w-3 rounded-full bg-green-700 animate-ping"></span>
</span>
</button>
<button class="relative flex p-2  text-gray-50 font-semibold bg-gray-800 animate-bounce rounded">
Press Me
</button>
<h1 class="text-4xl font-semibold text-red-500 animate-pulse">I am fading soon</h1>
</div>

Tailwind has 3 predefined animation classes namely: ping, pulse and bounce. These three basic animation classes are sufficient for anyone who has just started the journey of web development.