EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

Tailwind CSS الانتقالات والرسوم المتحركة: خصائص transition وتحديثات animate

خصائص الانتقال (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="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض خصائص الانتقال</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 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">انتقالات الألوان transition-colors</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">
          انتقال اللون
        </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">
          انتقال الخلفية + النص
        </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">
          انتقال الحدود
        </button>
      </div>
    </div>

    <!-- انتقالات الشفافية transition-opacity -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">انتقالات الشفافية transition-opacity</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">
          مرر للنصف شفاف
        </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">
          مرر لمعتم بالكامل
        </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">
          مرر لل:UIControlState
        </div>
      </div>
    </div>

    <!-- انتقالات الظلال transition-shadow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">انتقالات الظلال transition-shadow</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">
          ظل صغير
        </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">
          ظل كبير
        </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">
          ظل ملون
        </div>
      </div>
    </div>

    <!-- انتقالات التحويل transition-transform -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">انتقالات التحويل transition-transform</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">
          تكبير
        </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">
          تدوير
        </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">
          تحريك للأعلى
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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.

مدة الانتقال (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="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض مدة الانتقال</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">مقارنة مدد الانتقال المختلفة</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">مرر مؤشر الفأرة فوق كتل الألوان لرؤية مدد الانتقال المختلفة</p>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود
💡 نصيحة: تستخدم العناصر التفاعلية (الأزرار، الروابط) عادةً duration-150 أو duration-200، بينما تستخدم الرسوم المتحركة الأكبر duration-300 أو duration-500.

دالات التسهيل (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="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض دالات التسهيل</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">مقارنة دالات التسهيل المختلفة</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">مرر مؤشر الفأرة فوق كتل الألوان لرؤية تأثيرات التسهيل المختلفة</p>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

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

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

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض تأخير الانتقال</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">تأثير الرسوم المتحركة المتتالية (باستخدام التأخير)</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">مرر لرؤية تأثير الرسوم المتحركة المتتالية</p>
    </div>

    <!-- رسوم متحركة للدخول المتتالي -->
    <div class="bg-white rounded-lg shadow p-6 mt-6">
      <h3 class="font-semibold mb-6">رسوم متحركة للدخول المتتالي</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]">
          العنصر 1 (بدون تأخير)
        </div>
        <div class="p-4 bg-green-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.1s_forwards]">
          العنصر 2 (تأخير 100ms)
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.2s_forwards]">
          العنصر 3 (تأخير 200ms)
        </div>
        <div class="p-4 bg-orange-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.3s_forwards]">
          العنصر 4 (تأخير 300ms)
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود
💡 نصيحة: استخدم delay-* بقيم تأخير مختلفة لإنشاء تأثيرات رسوم متحركة متتالية، مما يجعل عدة عناصر تظهر واحداً تلو الآخر.

الرسوم المتحركة المسبقة (animate-*)

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

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الرسوم المتحركة المسبقة</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 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الرسوم المتحركة الدوارة animate-spin</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 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الرسوم المتحركة النبضية animate-ping</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">
          إشعار
          <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 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الرسوم المتحركة النابضة animate-pulse</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>
      <!-- مثال شاشة الهيكل -->
      <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 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الرسوم المتحركة المتراكضة animate-bounce</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>
▶ جرّب الكود

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

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

الإطارات المفتاحية المخصصة

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الإطارات المفتاحية المخصصة</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">
    <!-- رسوم متحركة مخصصة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">رسوم متحركة مخصصة</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">تلاشي للظهور</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">انزلاق للأعلى مع التلاشي</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">انزلاق من اليسار</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">تكبير للظهور</div>
        </div>
      </div>
    </div>

    <!-- رسوم متحركة للهز -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">الرسوم المتحركة للهز shake</h3>
      <div class="flex gap-4">
        <input type="text" placeholder="حقل الإدخال"
               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">
          إرسال
        </button>
      </div>
      <p class="text-sm text-red-500 mt-2">استخدم رسوم الهز المتحركة للإشارة إلى أخطاء الإدخال</p>
    </div>

    <!-- التحكم بالرسوم المتحركة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">التحكم بالرسوم المتحركة</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">
          مرر للتشغيل
        </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">
          تراكض 3 مرات
        </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">
          اتجاه متبادل
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

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

مثال شامل

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال شامل للانتقالات والرسوم المتحركة</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">
    <!-- بطاقات تفاعلية -->
    <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="بطاقة"
               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">عرض التفاصيل</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">بطاقة تأثير التمرير</h4>
          <p class="text-gray-600 text-sm">تكبير الصورة، ظهور التراكب، انزلاق النص</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="بطاقة"
               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">عرض التفاصيل</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">بطاقة تأثير الدوران</h4>
          <p class="text-gray-600 text-sm">دوران الصورة، ظهور التراكب، انزلاق النص</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="بطاقة"
               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">عرض التفاصيل</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">بطاقة تأثير السطوع</h4>
          <p class="text-gray-600 text-sm">تعزيز السطوع، ظهور التراكب، انزلاق النص</p>
        </div>
      </div>
    </div>

    <!-- حالات التحميل -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">رسوم حالات التحميل المتحركة</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">جاري التحميل</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">تحميل متراكض</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">تحميل نابض</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

❓ أسئلة شائعة

س ما الفرق بين transition و transition-all؟
ج يقوم transition بانتقال الخصائص الشائعة (الألوان، الخلفيات، الحدود، الظلال، التحويلات، إلخ)، بينما يقوم transition-all بانتقال جميع الخصائص القابلة للتحريك. يُنصح عموماً باستخدام transition لأداء أفضل.
س كيف أجعل الرسوم المتحركة تُلعب مرة واحدة فقط؟
ج استخدم [animation-iteration-count:1] أو اضبط animation-fill-mode: forwards عند تعريف الرسوم المتحركة في @theme للحفاظ على الحالة النهائية.
س ماذا أفعل إذا لم تعمل رسوم الانتقال المتحركة؟
ج تأكد من إضافة فئة transition، وتأكد أن الخاصية قابلة للانتقال (display ليست كذلك)، وتأكد أن duration ليست 0.
س كيف أنشئ رسوم متحركة متتالية؟
ج استخدم فئات delay-* بقيم تأخير مختلفة لعناصر متعددة. على سبيل المثال، يمكن لـ 5 عناصر استخدام 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: لتحقيق تأثير رسوم متحركة مدمج يشمل تكبير الصورة وظهور التراكب وانزلاق العنوان عند التمرير

100%