95. مقدمة في رسوم CSS المتحركة

بينما تتعامل الانتقالات (transitions) مع التغييرات بين حالتين (مثل العادي وتمرير الماوس) ، تسمح رسوم CSS المتحركة بسلاسل معقدة ومتعددة الخطوات من تغييرات الأنماط بمرور الوقت.

الخطوة 1: تعريف الإطارات الرئيسية (@keyframes)

تقوم أولاً بتعريف الاسم وخطوات الرسوم المتحركة باستخدام قاعدة @keyframes. تُحدد الخطوات بنسب مئوية (0% إلى 100%) أو كلمات محجوزة (from و to).

css @keyframes pulse { /* حالة البداية / 0% { transform: scale(1); opacity: 1; } / الحالة المتوسطة / 50% { transform: scale(1.05); opacity: 0.8; } / حالة النهاية */ 100% { transform: scale(1); opacity: 1; } }

الخطوة 2: تطبيق الرسوم المتحركة

تقوم بتطبيق الرسوم المتحركة على عنصر باستخدام خاصية animation (الاختصار) أو خصائصها المفصلة.

css .pulsing-box { /* 1. الاسم 2. المدة 3. دالة التوقيت 4. عدد التكرار */ animation: pulse 2s ease-in-out infinite; }