Helpful Small Animations

Animations are integral to web design, enriching user experiences through intuitive feedback, visual appeal, and attention-grabbing effects. They enhance engagement, communicate complex information effectively, and imbue brand identity. Used thoughtfully, animations elevate websites, fostering memorability, guiding users, and ultimately contributing to overall user satisfaction and conversion rates.

Some of the common animations

1. Loading Indicator:

<button class="animate-spin rounded-full bg-blue-500 px-4 py-2 text-white">
 Loading...
</button>

Use: It creates a continuous spinning motion, ideal for loading indicators

2. Pulsing and Fading Button:

<button class="animate-pulse animate-fade rounded-full bg-green-500 px-4 py-2 text-white">
 Click Me!
</button>

Use: This makes the element expand and contract simultaneously fading rhythmically, useful for highlighting important element.

3. Scale Animation:

<button class="animate-ping rounded-full bg-red-500 px-4 py-2 text-white">
 Hover Me
</button>

Use: This button will have a scaling animation applied to it when hovered over.

4. Spin Animation:

<button class="animate-spin-slow rounded-full bg-yellow-500 px-4 py-2 text-white">
 Wait...
</button>

Use: This button will have a slow spinning animation applied to it.

Now using @keyframes

1. Fade in Animation:

<div style="animation: fadeIn 0.5s ease-out;">
 Content
</div>
<style>
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
 }
</style>

2. Slide In Animation:

<div style="animation: slideInRight 0.5s ease-out;">
 Content
</div>
<style>
 @keyframes slideInRight {
   from { transform: translateX(100%); }
   to { transform: translateX(0); }
 }
</style>

3. Bounce Animation:

<div style="animation: bounce 0.5s infinite;">
 Content
</div>
<style>
 @keyframes bounce {
   0%, 100% { transform: translateY(-20px); }
   50% { transform: translateY(0); }
 }
</style>

4. Rotate Animation:

<div style="animation: spin 1s linear infinite;">
 Content
</div>
<style>
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
</style>