تعلم أساسيات التحريك في CSS - دليل شامل للمبتدئين

✨ أنيميشن CSS: أضف الحياة إلى موقعك الإلكتروني! 🎬

مرحباً بك في عالم التحريك باستخدام CSS! إذا كنت تريد جعل موقعك أكثر ديناميكية وجاذبية دون الحاجة لاستخدام JavaScript، فأنت في المكان الصحيح. في هذا الدرس، سنتعلم كيفية تحريك العناصر على الصفحة بسلاسة باستخدام أدوات CSS البسيطة والفعالة.

🤔 ما هي أنيميشن CSS؟

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

الهدف هو تحسين تجربة المستخدم وجعل التفاعل مع الموقع أكثر متعة ووضوحاً.

🚀 البداية: خاصية transition (الانتقال)

أسهل طريقة لبدء التعلم هي باستخدام خاصية transition. هذه الخاصية تسمح لك بتحديد كيف ومتى يحدث التغيير عندما يتغير نمط العنصر (مثل تغيير اللون أو الحجم).

تتكون transition من عدة خصائص فرعية:

• transition-property: خاصية CSS التي تريد تطبيق الانتقال عليها (مثل color, background-color, transform).
• transition-duration: مدة الاستغراق الزمني للانتقال (مثل 1s تعني ثانية واحدة).
• transition-timing-function: سرعة سير الحركة (مثل ease-in تبدأ ببطء ثم تتسارع).
• transition-delay: وقت الانتظار قبل بدء الحركة.

لتبسيط الأمر، يمكننا جمعهم جميعاً في خاصية transition واحدة.

مثال عملي: زر يتغير عند المرور فوقه

لنصنع زراً يتغير لونه وخلفيته بسلاسة عندما يمر عليه مؤشر الفأرة.

<!-- الملف index.html -->
<button class="animated-button">اضغط عليّ!</button>

/* الملف style.css */
.animated-button {
  background-color: #4CAF50; /* لون أخضر */
  color: white;
  padding: 15px 30px;
  border: none;
  font-size: 16px;
  /* هذه هي خاصية الانتقال: 
     نطبقها على خاصية background-color و color 
     لمدة 0.5 ثانية، بسرعة طبيعية (ease)، وبدون تأخير */
  transition: background-color 0.5s ease, color 0.5s ease;
}

.animated-button:hover {
  background-color: #45a049; /* لون أخضر داكن */
  color: yellow;
}

💡 شرح المثال: عند وضع مؤشر الفأرة فوق الزر (hover)، سيتغير لون الخلفية والخط. بدلاً من أن يكون التغيير فورياً، فإن خاصية transition تجعل هذا التغيير يحدث بسلاسة على مدى نصف ثانية.

🎯 الخطوة التالية: @keyframes و animation

إذا كنت تريد تحكيماً أكثر تعقيداً وتتحكم فيه بشكل كامل، فأنت بحاجة إلى @keyframes و animation.

1. @keyframes (إطارات الحركة): هنا تحدد بالضبط ماذا يحدث في كل مرحلة من مراحل التحريك. إنها مثل قصة مصورة للحركة.
2. خاصية animation: تستخدم لتطبيق مجموعة @keyframes التي أنشأتها على عنصر ما.

مثال عملي: جعل عنصر يتحرك من اليسار إلى اليمين

لننشئ مربعاً يتحرك عبر الشاشة.

/* أولاً: نعرف إطارات الحركة (الكيفية) */
@keyframes moveRight {
  from {
    transform: translateX(0px); /* يبدأ من موضعه الأصلي */
  }
  to {
    transform: translateX(300px); /* يتحرك 300 بكسل إلى اليمين */
  }
}

/* ثانياً: نطبق الحركة على العنصر (التطبيق) */
.moving-box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* تطبيق الحركة: 
     اسمها moveRight، مدتها 3 ثوان، تتكرر إلى ما لا نهاية */
  animation-name: moveRight;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* يعكس الحركة ذهاباً وإياباً */
}

💡 شرح المثال:

• @keyframes moveRight: نعرف حركة باسم moveRight.
• from و to: تمثل نقطة البداية ونقطة النهاية. يمكننا أيضاً استخدام النسب المئوية مثل 0%, 50%, 100% لتحريك أكثر تعقيداً.
• نطبق هذه الحركة على العنصر ذو الصنف .moving-box باستخدام خصائص animation.

🧠 خلاصة سريعة

• استخدم transition للتحاكات البسيطة التي تنتج عن تغيير حالة العنصر (مثل :hover).
• استخدم @keyframes و animation للتحاكات الأكثر تعقيداً والتي تبدأ تلقائياً ولها مسار محدد مسبقاً.
• ابدأ دائماً بتجارب بسيطة لفهم المبادئ الأساسية قبل الانتقال إلى مشاريع أكثر تعقيداً.