Tailwind CSSIntermediate
Animation & Transitions
Tailwind-এ animate, transition, transform — animation utilities বাংলায়।
10টি অংশবাংলা ভাষায়
Tailwind-এ pre-built animation classes আছে এবং custom animation-ও দেওয়া যায়।
Built-in Animations
<div class="animate-spin">Spinner</div>
<div class="animate-pulse">Pulsing element</div>
<div class="animate-bounce">Bouncing element</div>
<div class="animate-none">No animation</div>Transitions
<!-- সবকিছু transition -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg transition-all duration-300 hover:bg-blue-700 hover:scale-105">
Smooth hover
</button>
<!-- শুধু specific property -->
<div class="transition-colors duration-200 bg-white hover:bg-gray-100">
Color transition
</div>
<!-- Transform -->
<div class="transition-transform duration-200 hover:scale-110 hover:rotate-3">
Transform on hover
</div>Transition Properties
| Class | কাজ |
|---|---|
| transition-none | কোনো transition নেই |
| transition-all | সব property transition |
| transition | default properties |
| transition-colors | শুধু color |
| transition-opacity | শুধু opacity |
| transition-shadow | শুধু shadow |
| transition-transform | শুধু transform |
Duration
<div class="transition duration-75">৭৫ms (very fast)</div>
<div class="transition duration-150">১৫০ms (fast)</div>
<div class="transition duration-300">৩০০ms (normal)</div>
<div class="transition duration-500">৫০০ms (slow)</div>
<div class="transition duration-1000">১০০০ms (very slow)</div>Performance
শুধু transform ও opacity animate করুন — এগুলো GPU-accelerated। width, height, margin animate করলে performance খারাপ হতে পারে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।