English 中文 العربية 日本語 Português

Tailwind CSS: التحولات والرسوم المتحركة في Tailwind CSS

1. خصائص الانتقال (transition-*)

تتحكم فئات الانتقال في تأثيرات الرسوم المتحركة السلسة عند تغير حالات العناصر.

الفئة قيمة CSS الوصف
transition transition-property: color, background-color, border-color, ... انتقالات الخصائص المشتركة
transition-all transition-property: all جميع انتقالات الخصائص
transition-colors transition-property: color, background-color, border-color, ... انتقالات بالألوان فقط
transition-opacity transition-property: opacity انتقالات تعتمد على التعتيم فقط
transition-shadow transition-property: box-shadow انتقالات تعتمد على الظلال فقط
transition-transform transition-property: transform انتقالات تعتمد على التحويل فقط
transition-none transition-property: none بدون انتقال

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Properties Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- transition-colors color transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-colors Color Transitions</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300">
          Color transition
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-700 hover:text-yellow-200 transition-colors duration-300">
          Background + text transition
        </button>
        <button class="px-6 py-3 border-2 border-purple-500 text-purple-500 rounded-lg hover:border-purple-700 hover:text-purple-700 transition-colors duration-300">
          Border transition
        </button>
      </div>
    </div>

    <!-- transition-opacity opacity transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-opacity Opacity Transitions</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-blue-500 rounded-lg hover:opacity-50 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          Hover to half-transparent
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg opacity-50 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          Hover to fully opaque
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg hover:opacity-0 transition-opacity duration-500 flex items-center justify-center text-white text-xs">
          Hover to fade out
        </div>
      </div>
    </div>

    <!-- transition-shadow shadow transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-shadow Shadow Transitions</h3>
      <div class="flex gap-4">
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-lg transition-shadow duration-300 flex items-center justify-center text-sm">
          Small shadow
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-xl transition-shadow duration-300 flex items-center justify-center text-sm">
          Large shadow
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-2xl hover:shadow-blue-500/50 transition-shadow duration-300 flex items-center justify-center text-sm">
          Colored shadow
        </div>
      </div>
    </div>

    <!-- transition-transform transform transitions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-transform Transform Transitions</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Scale up
        </div>
        <div class="w-24 h-24 bg-red-500 rounded-lg hover:rotate-12 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Rotate
        </div>
        <div class="w-24 h-24 bg-teal-500 rounded-lg hover:-translate-y-2 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          Move up
        </div>
      </div>
    </div>
  </div>
</body>
</html>
69 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة transition: color 0.3s ease, background-color 0.3s ease والخصائص المماثلة، بينما يستخدم Tailwind أسماء الفئات مثل transition-colors duration-300 للإعلان المباشر.

💡 نصيحة: تقوم فئة transition بنقل الخصائص الشائعة بشكل افتراضي، بما في ذلك color وbackground-color وborder-color وopacity وbox-shadow وtransform.

2. مدة الانتقال (duration-*)

تتحكم فئات duration-* في مدة الرسوم المتحركة للانتقالات.

الفئة قيمة CSS الوصف
duration-75 transition-duration: 75ms فائق السرعة
duration-100 transition-duration: 100ms سريع جدًا
duration-150 transition-duration: 150ms سريع
duration-200 transition-duration: 200ms سريع نسبيًا
duration-300 transition-duration: 300ms عادي (افتراضي)
duration-500 transition-duration: 500ms بطيء نسبيًا
duration-700 transition-duration: 700ms بطيء
duration-1000 transition-duration: 1000ms بطيء جدًا

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Duration Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Comparing Different Transition Durations</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-75</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-75"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-150</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-150"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-300</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-300"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-500</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-orange-500 rounded-lg hover:w-full transition-all duration-500"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-1000</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-red-500 rounded-lg hover:w-full transition-all duration-1000"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">Hover over the color blocks to see different transition durations</p>
    </div>
  </div>
</body>
</html>
49 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)
💡 نصيحة: عادةً ما تستخدم العناصر التفاعلية (الأزرار والروابط) duration-150 أو duration-200، بينما تستخدم الرسوم المتحركة الأكبر حجمًا duration-300 أو duration-500.

3. دوال التخفيف (ease-*)

تتحكم فئات ease-* في منحنى التسارع لرسوم الحركة الانتقالية.

الفئة قيمة CSS الوصف
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) بداية ونهاية بطيئة

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Easing Functions Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Comparing Different Easing Functions</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-linear</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-1000 ease-linear"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-1000 ease-in"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-1000 ease-out"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-purple-500 rounded-lg hover:w-full transition-all duration-1000 ease-in-out"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">Hover over the color blocks to see different easing effects</p>
    </div>
  </div>
</body>
</html>
43 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)، بينما تستخدم Tailwind اسم الفئة ease-in-out للإعلان المباشر.

4. تأخير الانتقال (delay-*)

تتحكم فئات delay-* في مدة التأخير قبل بدء الرسوم المتحركة للانتقال.

الفئة قيمة CSS الوصف
delay-0 transition-delay: 0ms بدون تأخير
delay-75 transition-delay: 75ms تأخير 75 مللي ثانية
delay-100 transition-delay: 100ms تأخير 100 مللي ثانية
delay-150 transition-delay: 150ms تأخير 150 مللي ثانية
delay-300 transition-delay: 300ms تأخير 300 مللي ثانية
delay-500 transition-delay: 500ms تأخير 500 مللي ثانية
delay-700 transition-delay: 700ms تأخير 700 مللي ثانية
delay-1000 transition-delay: 1000ms تأخير 1000 مللي ثانية

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Delay Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">Staggered Animation Effect (using delay)</h3>
      <div class="flex gap-4 justify-center">
        <div class="w-16 h-16 bg-blue-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-0"></div>
        <div class="w-16 h-16 bg-green-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-75"></div>
        <div class="w-16 h-16 bg-yellow-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-150"></div>
        <div class="w-16 h-16 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-300"></div>
        <div class="w-16 h-16 bg-red-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-500"></div>
      </div>
      <p class="text-sm text-gray-500 mt-4 text-center">Hover to see the staggered animation effect</p>
    </div>

    <!-- Staggered entrance animation -->
    <div class="bg-white rounded-lg shadow p-6 mt-6">
      <h3 class="font-semibold mb-6">Staggered Entrance Animation</h3>
      <div class="space-y-3">
        <div class="p-4 bg-blue-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0s_forwards]">
          Item 1 (0ms delay)
        </div>
        <div class="p-4 bg-green-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.1s_forwards]">
          Item 2 (100ms delay)
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.2s_forwards]">
          Item 3 (200ms delay)
        </div>
        <div class="p-4 bg-orange-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.3s_forwards]">
          Item 4 (300ms delay)
        </div>
      </div>
    </div>
  </div>
</body>
</html>
41 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)
💡 نصيحة: استخدم delay-* مع قيم تأخير مختلفة لإنشاء تأثيرات رسوم متحركة متتابعة، بحيث تظهر العناصر المتعددة واحدة تلو الأخرى.

5. الرسوم المتحركة المعدة مسبقًا (animate-*)

يوفر Tailwind 4 فئات للرسوم المتحركة معدة مسبقًا.

الفئة قيمة CSS الوصف
animate-spin رسوم متحركة للدوران مناسبة لأيقونات التحميل
animate-ping رسوم متحركة لـ «بينغ» مناسبة لنبضات الإشعارات
animate-pulse رسوم متحركة على شكل نبضات مناسبة لشاشات الهيكل العظمي
animate-bounce حركة ارتداد مناسبة لمؤشرات الأسهم

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preset Animations Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- animate-spin rotation -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-spin Rotation Animation</h3>
      <div class="flex gap-8 items-center">
        <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div class="w-12 h-12 border-4 border-green-500 border-t-transparent border-r-transparent rounded-full animate-spin"></div>
        <svg class="w-12 h-12 text-purple-500 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
      </div>
    </div>

    <!-- animate-ping ping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-ping Ping Animation</h3>
      <div class="flex gap-8 items-center">
        <div class="relative">
          <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
          <div class="absolute inset-0 w-4 h-4 bg-blue-500 rounded-full animate-ping"></div>
        </div>
        <div class="relative">
          <div class="w-8 h-8 bg-green-500 rounded-full"></div>
          <div class="absolute inset-0 w-8 h-8 bg-green-500 rounded-full animate-ping opacity-75"></div>
        </div>
        <button class="relative px-6 py-3 bg-red-500 text-white rounded-lg">
          Notification
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-ping"></span>
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full"></span>
        </button>
      </div>
    </div>

    <!-- animate-pulse pulse -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-pulse Pulse Animation</h3>
      <div class="flex gap-8 items-center">
        <div class="w-16 h-16 bg-blue-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-green-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-purple-200 rounded-lg animate-pulse"></div>
      </div>
      <!-- Skeleton screen example -->
      <div class="mt-6 p-4 bg-gray-50 rounded-lg">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse"></div>
          <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 rounded animate-pulse w-3/4"></div>
            <div class="h-3 bg-gray-200 rounded animate-pulse w-1/2"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- animate-bounce bounce -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-bounce Bounce Animation</h3>
      <div class="flex gap-8 items-center justify-center">
        <svg class="w-8 h-8 text-blue-500 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
        <div class="w-8 h-8 bg-green-500 rounded-full animate-bounce"></div>
        <div class="w-8 h-8 bg-orange-500 rounded-lg animate-bounce"></div>
      </div>
    </div>
  </div>
</body>
</html>
69 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة الخصائص @keyframes وanimation، بينما يستخدم Tailwind أسماء الفئات مثل animate-spin وanimate-pulse لتطبيق الرسوم المتحركة المعدة مسبقًا بشكل مباشر.

💡 نصيحة: عادةً ما يُستخدم animate-ping مع التموضع المطلق لإنشاء تأثيرات إشعارات متقطعة. أما animate-pulse فهو مثالي لتأثيرات تحميل الشاشة الهيكليّة.

6. الإطارات الرئيسية المخصصة

يمكنك تعريف الرسوم المتحركة المخصصة باستخدام إعدادات Tailwind أو التوجيه @theme.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Keyframes Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in: fadeIn 0.5s ease-out;
      --animate-fade-in-up: fadeInUp 0.5s ease-out;
      --animate-slide-in-left: slideInLeft 0.5s ease-out;
      --animate-scale-in: scaleIn 0.3s ease-out;
      --animate-shake: shake 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
      20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Custom animations -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Custom Animations</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 bg-blue-50 rounded-lg text-center animate-fade-in">
          <div class="text-2xl mb-2">fadeIn</div>
          <div class="text-sm text-gray-600">Fade in</div>
        </div>
        <div class="p-4 bg-green-50 rounded-lg text-center animate-fade-in-up">
          <div class="text-2xl mb-2">fadeInUp</div>
          <div class="text-sm text-gray-600">Slide up fade in</div>
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg text-center animate-slide-in-left">
          <div class="text-2xl mb-2">slideInLeft</div>
          <div class="text-sm text-gray-600">Slide in from left</div>
        </div>
        <div class="p-4 bg-purple-50 rounded-lg text-center animate-scale-in">
          <div class="text-2xl mb-2">scaleIn</div>
          <div class="text-sm text-gray-600">Scale in</div>
        </div>
      </div>
    </div>

    <!-- shake animation -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">shake Animation</h3>
      <div class="flex gap-4">
        <input type="text" placeholder="Input field"
               class="flex-1 p-3 border border-red-300 rounded-lg animate-shake focus:outline-none focus:border-red-500">
        <button class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600">
          Submit
        </button>
      </div>
      <p class="text-sm text-red-500 mt-2">Use the shake animation to indicate input errors</p>
    </div>

    <!-- Animation control -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Animation Control</h3>
      <div class="flex gap-4 flex-wrap">
        <div class="w-16 h-16 bg-blue-500 rounded-lg animate-spin [animation-play-state:paused] hover:[animation-play-state:running] flex items-center justify-center text-white text-xs cursor-pointer">
          Hover to play
        </div>
        <div class="w-16 h-16 bg-green-500 rounded-lg animate-bounce [animation-iteration-count:3] flex items-center justify-center text-white text-xs">
          Bounce 3 times
        </div>
        <div class="w-16 h-16 bg-purple-500 rounded-lg animate-pulse [animation-direction:alternate] flex items-center justify-center text-white text-xs">
          Alternate direction
        </div>
      </div>
    </div>
  </div>
</body>
</html>
102 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعريف @keyframes في ملف CSS وكتابة خصائص animation، بينما تتيح لك توجيهات @theme في Tailwind v4 تعريف متغيرات الرسوم المتحركة مباشرةً، لاستخدامها مع فئات animate-*.

⚠️ ملاحظة: في وضع Tailwind CDN، يجب وضع التوجيه @theme داخل علامة <style type="text/tailwindcss"> حتى يعمل.

7. مثال شامل

الجمع بين الانتقالات والرسوم المتحركة لإنشاء مثال لتأثير تفاعلي كامل.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transitions & Animations Comprehensive Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in-up: fadeInUp 0.6s ease-out forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Interactive cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=20" alt="Card"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">View Details</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Hover Effect Card</h4>
          <p class="text-gray-600 text-sm">Image zoom, overlay reveal, text slide-in</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=21" alt="Card"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:rotate-3">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">View Details</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Rotation Effect Card</h4>
          <p class="text-gray-600 text-sm">Image rotation, overlay reveal, text slide-in</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=22" alt="Card"
               class="w-full h-full object-cover transition-all duration-500 group-hover:brightness-125">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">View Details</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">Brightness Effect Card</h4>
          <p class="text-gray-600 text-sm">Brightness enhancement, overlay reveal, text slide-in</p>
        </div>
      </div>
    </div>

    <!-- Loading states -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Loading State Animations</h3>
      <div class="flex gap-8 items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
          <span class="text-sm text-gray-600">Loading</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
          </div>
          <span class="text-sm text-gray-600">Bouncing loading</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.15s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.3s;"></div>
          </div>
          <span class="text-sm text-gray-600">Pulse loading</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
96 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

❓ أسئلة شائعة

س ما الفرق بين transition و transition-all؟
ج transition يُطبق الانتقال على الخصائص الشائعة (الألوان، الخلفيات، الحدود، الظلال، التحويلات، إلخ)، بينما transition-all يُطبق الانتقال على جميع الخصائص القابلة للرسوم المتحركة. يُنصح عمومًا باستخدام transition لتحقيق أداء أفضل.
س كيف يمكنني جعل الرسوم المتحركة تُعرض مرة واحدة فقط؟
ج استخدم [animation-iteration-count:1] أو اضبط animation-fill-mode: forwards عند تعريف الرسوم المتحركة في @theme للحفاظ على الحالة النهائية.
س ماذا أفعل إذا لم تعمل الرسوم المتحركة للانتقال؟
ج تحقق من أنك أضفت فئة transition، وتأكد من أن الخاصية قابلة للانتقال (display غير قابلة لذلك)، وتأكد أيضًا من أن duration ليست 0.
س كيف يمكنني إنشاء رسوم متحركة متتابعة؟
ج استخدم فئات delay-* بقيم تأخير مختلفة لعناصر متعددة. على سبيل المثال، يمكن لخمسة عناصر استخدام delay-0 وdelay-75 وdelay-150 وdelay-300 وdelay-500 على التوالي.

📖 ملخص

📝 تمارين

  1. ⭐ قم بإنشاء مكون زر يستخدم transition-colors duration-200 لتحقيق انتقالات سلسة بين ألوان الخلفية والنص عند تمرير المؤشر فوقه

  2. ⭐⭐ إنشاء مؤشر تحميل يستخدم animate-spin لرسم دائرة دوارة مقترنة بـ animate-pulse لإحداث تأثير نابض

  3. ⭐⭐⭐ إنشاء معرض صور يستخدم transition-all duration-300 وgroup-hover: لتحقيق تأثير رسومي مركب يجمع بين تكبير الصورة، وكشف التراكب، وظهور العنوان تدريجيًا عند تمرير المؤشر فوق الصورة

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%