المحاضرة السابعة: انتقالات CSS والرسوم المتحركة

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

مقدمة إلى انتقالات CSS

تمكنك انتقالات CSS من تغيير قيم الخصائص بسلاسة خلال مدة محددة. إنها مثالية لإنشاء تأثيرات التمرير ورسوم الأزرار المتحركة والعناصر التفاعلية الأخرى.

1. بناء الجملة الأساسي

لإنشاء انتقال، تحتاج إلى تحديد خاصية CSS للانتقال، والمدة، ووظائف التخفيف الاختيارية.

• مثال:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

في هذا المثال، يتغير لون خلفية الزر بسلاسة خلال 0.3 ثانية عند التمرير.

2. نقل خصائص متعددة

يمكنك نقل خصائص متعددة مرة واحدة عن طريق فصلها بفواصل.

• مثال:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

يغير هذا المثال بسلاسة العرض والارتفاع ولون الخلفية للمربع عند التمرير.

3. وظائف التخفيف

تتحكم وظائف التخفيف في سرعة الانتقال عند نقاط مختلفة، مما يؤدي إلى إنشاء تأثيرات مثل التخفيف أو التخفيف أو كليهما.

• وظائف التخفيف الشائعة:
  • سهولة: يبدأ ببطء، ثم يتسارع، ثم يتباطأ مرة أخرى.
  • خطي: يحافظ على سرعة ثابتة.
  • سهولة الدخول: يبدأ ببطء، ثم يتسارع.
  • التخفيف: يبدأ بسرعة، ثم يتباطأ.

مقدمة إلى الرسوم المتحركة CSS

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

1. بناء الجملة الأساسي

لإنشاء رسم متحرك، قم بتحديد الإطارات الرئيسية وتطبيقها على عنصر باستخدام خاصية الرسوم المتحركة.

• مثال:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

في هذا المثال:

• تحدد قاعدة @keyframes خطوات الرسوم المتحركة، وتغيير لون الخلفية وموضعها.
• تطبق فئة .animate-box الرسوم المتحركة، والتي يتم تشغيلها لمدة 5 ثوانٍ وتتكرر بلا حدود.

2. التحكم في توقيت الرسوم المتحركة

يمكنك التحكم في التوقيت والتأخير وعدد التكرارات للرسوم المتحركة.

• مثال:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5ث: مدة الرسوم المتحركة.
• سهولة الدخول: وظيفة التخفيف.
• 1s: التأخير قبل بدء الرسوم المتحركة.
• 3: سيتم تكرار الرسوم المتحركة ثلاث مرات.
• البديل: ستعكس الرسوم المتحركة الاتجاه في كل تكرار.

3. الجمع بين التحولات والرسوم المتحركة

يمكنك استخدام التحولات والرسوم المتحركة معًا لإنشاء المزيد من التأثيرات الديناميكية.

• مثال:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

هذا المثال:

• تستخدم فئة .button انتقالًا لتغيير حجم الزر قليلاً عند التمرير.
• تستخدم فئة .pulse-button الرسوم المتحركة لإنشاء تأثير نبضي مستمر.

مثال عملي:

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

HTML:

Hover Me!

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

في هذا المثال:

• يغير الزر لون خلفيته ويتحرك لأعلى قليلاً عند التمرير.
• عند النقر على الزر، فإنه يهتز باستخدام رسم متحرك مخصص.

التمرين العملي

1. قم بإنشاء تأثير تمرير للرابط الذي يغير لونه ويضيف تسطيرًا باستخدام الانتقال.
2. قم بإنشاء رسم متحرك للإطار الرئيسي يحرك عنصرًا في دائرة.
3. ادمج التحولات والرسوم المتحركة لإنشاء عنصر تفاعلي مثل زر أو بطاقة تعمل على تغيير حجم التفاعل أو تغيير لونه أو تحريكه.

التالي: في المحاضرة التالية، سنستكشف الغوص العميق في CSS Flexbox، حيث ستتعلم كيفية الاستفادة الكاملة من Flexbox لإنشاء تخطيطات متقدمة وسريعة الاستجابة. ابقوا متابعين!

تابعني على لينكدإن

ريدوي حسن