Animation & Transition Tester

Step 1: Include Both Frameworks

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet">

Step 2: Handle CSS Conflicts

Add this CSS to prevent Bootstrap from overriding Tailwind animations:

<style>
/* Ensure Tailwind animations work with Bootstrap */
.animate-bounce { animation: bounce 1s infinite !important; }
.animate-pulse { animation: pulse 2s infinite !important; }
.animate-spin { animation: spin 1s linear infinite !important; }
.animate-ping { animation: ping 1s infinite !important; }

/* Transition overrides */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; }
.duration-300 { transition-duration: 300ms !important; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* Add keyframes */
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
/* Add other keyframes as needed... */
</style>

Step 3: Mix Bootstrap Layout with Tailwind Animations

<div class="card shadow-sm">
  <div class="card-body">
    <button class="btn btn-primary bg-blue-500 hover:bg-blue-600 transition-colors duration-300 animate-pulse">
      Animated Bootstrap Button
    </button>
  </div>
</div>

1. Optimize with PurgeCSS

Remove unused Tailwind classes in production:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,php}'],
  theme: {
    extend: {
      animation: {
        'fadeIn': 'fadeIn 1s ease-in-out',
        'slideInLeft': 'slideInLeft 0.5s ease-out',
      }
    }
  }
}

2. Use CSS Custom Properties for Dynamic Values

.dynamic-animation {
  --duration: 300ms;
  --delay: 0ms;
  transition-duration: var(--duration);
  transition-delay: var(--delay);
}

3. JavaScript Control

// Add animation class
element.classList.add('animate-bounce');

// Remove after animation
setTimeout(() => {
  element.classList.remove('animate-bounce');
}, 1000);

// Toggle on interaction
element.addEventListener('click', () => {
  element.classList.toggle('animate-pulse');
});

4. Accessibility Considerations

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-bounce,
  .animate-pulse,
  .animate-spin {
    animation: none !important;
  }
  
  .transition {
    transition: none !important;
  }
}

Button Interactions

<button class="btn btn-primary hover:scale-105 active:scale-95 transition-transform duration-150">
  Click Me
</button>

Loading States

<div class="animate-pulse bg-gray-300 h-4 rounded mb-2"></div>
<div class="animate-pulse bg-gray-300 h-4 rounded w-3/4"></div>

Card Animations

<div class="card hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
  <div class="card-body">Hover me!</div>
</div>

Form Validation

<input class="form-control border-red-500 animate-shake" />
<div class="text-red-500 animate-fadeIn">Error message</div>

Page Transitions

<main class="animate-fadeIn">
  <!-- Page content -->
</main>