في الدروس السابقة، تعرفنا على كيفية استخدام الانتقالات البسيطة (Transitions) لتغيير خصائص عناصر الويب بسلاسة عند تفاعل المستخدم معها، مثل تمرير مؤشر الفراشة أو النقر. ورغم قوة الانتقالات في الحالات البسيطة، إلا أنها تظل محددة بنقطة بداية ونهاية فقط، وتعجز عن إدارة السيناريوهات المعقدة التي تتطلب انتقالا عبر عدة مراحل زمنية متتالية أو حركات مستمرة ذاتية التشغيل.

في هذا الدرس، سننتقل إلى المستوى التالي عبر الغوص العميق في الرسوم المتحركة المتقدمة باستخدام (CSS Keyframes Animations). سنناقش كيف تمنحك هذه القاعدة تحكماً كاملاً بكل جزء من الثانية في عمر الحركة، وكيفية مزامنة الخصائص المتعددة، وإدارة الإيقاع والأداء لتجنب إبطاء المتصفح.

مفهوم Keyframes والفرق الجذري عن Transitions

تعتمد خاصية الانتقالات (Transitions) على رد الفعل؛ فهي تتطلب تغييراً في حالة العنصر (مثل الانتقال من الفئة :hover إلى الحالة العادية) لنقل العنصر من نقطة أ إلى نقطة ب. أما @keyframes في CSS، فتُنشئ جدولاً زمنياً مستقلاً بذاته. بمجرد تطبيق الحركة على العنصر، تبدأ في التنفذ تلقائياً أو وفقاً لخصائص التحكم دون الحاجة لتفاعل مباشر من المستخدم.

يتيح لك هيكل المفاتيح الزمنية تحديد ما يجب أن يحدث للعنصر في أي نسبة مئوية من مدة التشغيل الإجمالية، بدءاً من 0% وحتى 100%، أو باستخدام الكلمتين المفتاحيتين from و to. هذا يتيح لك تصميم مسارات حركة معقدة، مثل دوران العنصر، وتغيير شفافيته، وتكبيره وتصغيره، وتعديل ألوانه عبر خمس أو عشر محطات مختلفة ضمن دورة واحدة.

البنية الأساسية وكيفية تعريف Keyframes

لإنشاء حركة متقدمة، تحتاج أولاً إلى بناء الإطار الزمني باستخدام القاعدة @keyframes متبوعة باسم تختاره أنت للحركة، ثم تحديد المراحل النسبة المئوية:

@keyframes pulseAndSpin {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
    background-color: #3498db;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.8;
  }
}

في هذا التعريف، قمنا بتقسيم مدة الحركة إلى ثلاث محطات رئيسية. عند النسبة 0%، يكون العنصر بالحجم الطبيعي وزاوية دوران صفرية. عند منتصف المسار (50%)، يتضخم العنصر بنسبة 20%، ويكمل نصف دورة، ويتغير لون خلفيته. وعند النهاية (100%)، يعود لحجمه الأصلي مع إتمام دورة كاملة بمقدار 360 درجة.

تطبيق الحركة على العناصر باستخدام خصائص Animation

تعريف الإطارات المفتاحية وحدها لا يؤدي إلى أي تأثير مرئي؛ يجب ربط هذا الإطار الزمني بالعنصر المطلوب عبر مجموعة من الخصائص الفرعية أو الاختصارات (Shorthand). دعنا نلقي نظرة على الخصائص الفردية الأكثر أهمية:

• animation-name: يحدد اسم الإطار الزمني الذي أنشأناه (مثل pulseAndSpin).
• animation-duration: يحدد الزمن المستغرق لإتمام دورة واحدة كاملة (مثل 3s أو 500ms).
• animation-timing-function: يحدد إيقاع التسارع والتباطؤ، مثل ease، أو linear، أو منحنى بيزييه المخصص cubic-bezier().
• animation-delay: الفترة الزمنية التي ينتظرها المتصفح قبل بدء تشغيل الحركة.
• animation-iteration-count: عدد مرات تكرار الحركة، ويمكن أن يكون رقماً محدداً أو القيمة infinite للاستمرار إلى ما لا نهاية.
• animation-direction: يحدد اتجاه التشغيل، مثل normal، أو reverse، أو alternate (الذي يعكس الحركة في كل دورة زوجية).
• animation-fill-mode: يتحكم في حالة العنصر قبل بدء الحركة وبعد انتهائها.

مثال عملي متكامل: مؤشر تحميل احترافي (Loader)

لنقم ببناء مثال عملي متكامل يعرض مؤشر تحميل (Loading Spinner) مكوناً من عناصر متعددة تتحرك بتناغم باستخدام Keyframes، وهو نمط شائع في واجهات المستخدم الحديثة.

هذا هو كود HTML البسيط الخاص بالمثال:

<div class="loader-container">
  <div class="ring-spinner"></div>
  <span class="loading-text">جاري التحميل...</span>
</div>

وهذا هو كود CSS المرتبط به والذي ينفذ الرسوم المتحركة المتقدمة:

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 40px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.ring-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spinRing 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loading-text {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  color: #495057;
  animation: pulseText 1.5s ease-in-out infinite alternate;
}

@keyframes spinRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseText {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

تحليل وتفسير المثال العملي

في هذا المثال، قمنا بتنفيذ حركتين مستقلتين تعملان في نفس الوقت على عنصرين مختلفين داخل الحاوية:

الحركة الأولى spinRing مخصصة للعنصر .ring-spinner. قمنا بإنشاء تأثير حلقة دائرية عبر إعطاء الحدود (Borders) ألواناً مختلفة، ثم تدوير العنصر بزاوية 360 درجة. استخدام دالة cubic-bezier(0.5, 0, 0.5, 1) يمنح الحركة طابعاً ح,ركياً طبيعياً وغير رتيب مقارنة بالسرعة الثابتة (Linear).

الحركة الثانية pulseText مسؤولة عن النص. بدلاً من تدويره، استخدمنا خاصية الشفافية opacity للتحول بين 0.4 و 1، مع ضبط خاصية animation-direction على القيمة alternate. هذا يعني أن النص سيتلاشى ثم يظهر بانتظام وبشكل متواصل دون حدوث قفزة بصرية مزعجة عند إعادة التشغيل.

إدارة الأداء وتحسين الرسوم المتحركة (Performance Optimization)

عند العمل مع الرسوم المتحركة المتقدمة، يُعد الحفاظ على معدل إطارات مرتفع (60 إطاراً في الثانية على الأقل) أمراً بالغ الأهمية لتجنب التقطيع (Jank). يعتمد الأداء السلس بشكل أساسي على الخصائص التي تقوم بتحريكها.

يحاول المتصفح دائماً معالجة عناصر الصفحة عبر عدة مراحل: حساب التخطيط (Layout)، ثم طلاء العناصر (Paint)، وأخيراً التركيب (Compositing). تحريك خصائص مثل width، أو height، أو margin، أو top يجبر المتصفح على إعادة حساب التخطيط والطلاء لكل إطار زمني، مما يستهلك موارد المعالج ويؤدي إلى بطء ملحوظ.

لذلك، احرص دائماً على التركيز على الخصائص التي يعالجها وحدة معالجة الرسومات (GPU) عبر طبقة التركيب وحدها، وأهمها:

• transform: لتغيير الموقع (translate)، الحجم (scale)، والدوران (rotate).
• opacity: للتحكم في الشفافية والظهور والتلاشي.

استخدام هذين العنصرين فقط داخل @keyframes يضمن لك أداءً سلساً وسريعاً حتى على الأجهزة المتوسطة والضعيفة.

أخطاء شائعة يجب تجنبها

عند تصميم الرسوم المتحركة المتقدمة، يقع المطورون أحياناً في بعض الممارسات الخاطئة التي تؤثر على تجربة المستخدم:

الإفراط في الحركة (Visual Noise): تحريك عناصر كثيرة في نفس الوقت وبسرعات مختلفة يشتت انتباه المستخدم ويبعد التركيز عن المحتوى الأساسي. استخدم الرسوم المتحركة بحذر وهدف واضح.

إهمال خاصية Animation-Fill-Mode: إذا لم تقم بتحديد قيم مناسبة لهذه الخصائص، فقد يفاجأ المستخدم بعودة العنصر بشكل مفاجئ إلى حالته الأصلية فور انتهاء الحركة، مما يترك شعوراً بعدم الاكتمال.

تجاهل إعدادات إمكانية الوصول (Accessibility): بعض المستخدمين يعانون من حساسية تجاه الحركات السريعة أو الدوران المستمر (Vestibular disorders). من الاحترافية دائماً احترام تفضيلات النظام عبر استعلام الوسائط prefers-reduced-motion لإيقاف أو تبسيط الحركات عند طلب المستخدم.

@media (prefers-reduced-motion: reduce) {
  .ring-spinner,
  .loading-text {
    animation: none;
  }
}

خلاصة الدرس

تفتح لك الرسوم المتحركة المتقدمة باستخدام @keyframes آفاقاً واسعة لتصميم تفاعلات بصريّة غنية ومستقلة داخل صفحات الويب. من خلال فهم كيفية توزيع الإطارات الزمنية، واختيار الخصائص الصديقة لأداء المعالج مثل transform و opacity، ومراعاة معايير الأداء والوصولية، يمكنك بناء واجهات مستخدم متميزة ونابضة بالحياة دون التضحية بسرعة التحميل أو سلاسة التجربة.