خاصية animations في لغة CSS تُستخدم لإنشاء حركات ديناميكية وتأثيرات بصرية جذابة على عناصر HTML. تُتيح لك تحريك العناصر، تغيير حجمها، لونها، شفافيتها، موضعها، وغيرها من الخصائص، بشكل سلس ومنظم.

تعتمد animations على مفهومين أساسيين:

  1. قواعد @keyframes: تُستخدم لتعريف تسلسل الحركات (keyframes) التي ستُطبق على العنصر. تُحدد @keyframes الحالات المختلفة للعنصر خلال فترة زمنية مُحددة.
  2. خصائص animation: تُستخدم لتطبيق الحركة المُعرّفة في @keyframes على العنصر، وتحديد مدة الحركة، وتكرارها، وغيرها من الخصائص.

1. قواعد @keyframes:

تُستخدم لإنشاء سلسلة من الحالات (keyframes) التي يمر بها العنصر أثناء الحركة. تبدأ القاعدة بـ @keyframes متبوعة باسم للحركة، ثم قوسين مُعقوفين {} يحتويان على الحالات المختلفة.

CSS
@keyframes animation-name {
  0% { /* خصائص العنصر في بداية الحركة */ }
  25% { /* خصائص العنصر عند 25% من مدة الحركة */ }
  50% { /* خصائص العنصر عند منتصف مدة الحركة */ }
  75% { /* خصائص العنصر عند 75% من مدة الحركة */ }
  100% { /* خصائص العنصر في نهاية الحركة */ }
}

يُمكن استخدام الكلمات المفتاحية from (بدلاً من 0%) و to (بدلاً من 100%).

CSS
@keyframes move-element {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

في هذا المثال، تم تعريف حركة باسم move-element، حيث يبدأ العنصر بشفافية 0 ومُزاحًا بمقدار 100 بكسل إلى اليسار، ثم ينتهي بشفافية 1 وموقعه الأصلي.

2. خصائص animation:

تُستخدم لتطبيق الحركة المُعرّفة في @keyframes على العنصر، وتحديد خصائص الحركة. تُعتبر animation خاصية مُختصرة (shorthand property) تجمع عدة خصائص فرعية:

  • animation-name: اسم الحركة المُعرّفة في @keyframes. (إلزامي)

  • animation-duration: مدة الحركة بالثواني (s) أو المللي ثواني (ms). (إلزامي)

  • animation-timing-function: دالة التوقيت، تُحدد سرعة الحركة. القيم المُمكنة:

    • linear (سرعة ثابتة)
    • ease (بداية ونهاية بطيئة)
    • ease-in (بداية بطيئة)
    • ease-out (نهاية بطيئة)
    • ease-in-out (بداية ونهاية بطيئة)
    • cubic-bezier(n,n,n,n) (دالة بيزير مُخصصة)

  • animation-delay: تأخير بدء الحركة بالثواني (s) أو المللي ثواني (ms).

  • animation-iteration-count: عدد مرات تكرار الحركة. يُمكن استخدام قيمة رقمية أو infinite للتكرار اللانهائي.

  • animation-direction: اتجاه الحركة. القيم المُمكنة:

    • normal (الاتجاه الطبيعي)
    • reverse (عكس الاتجاه)
    • alternate (تبديل الاتجاه بين كل تكرار)
    • alternate-reverse (تبديل الاتجاه بين كل تكرار، مع البدء بالاتجاه المعاكس)

  • animation-fill-mode: كيفية تطبيق الأنماط على العنصر قبل بدء الحركة وبعد انتهائها. القيم المُمكنة:

    • none (لا يتم تطبيق أي أنماط خارج مدة الحركة)
    • forwards (يتم الاحتفاظ بنمط الحالة الأخيرة)
    • backwards (يتم تطبيق نمط الحالة الأولى قبل بدء الحركة)
    • both (يجمع بين forwards و backwards)

  • animation-play-state: حالة تشغيل الحركة. القيم المُمكنة:

    • running (تشغيل الحركة)
    • paused (إيقاف الحركة مؤقتًا)

  • مثال شامل:

HTML
<div class="box"></div>
CSS
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move-element;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes move-element {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); background-color: blue; }
  100% { transform: translateX(0); }
}

في هذا المثال، يتحرك المربع الأحمر إلى اليمين بمقدار 200 بكسل ثم يعود إلى مكانه بشكل متكرر، مع تغيير لونه إلى الأزرق في منتصف الحركة.

استخدامات animations:

  • إنشاء تأثيرات تحميل (loading animations).
  • تحريك عناصر القائمة أو الصور عند التمرير عليها.
  • إضافة حركات تفاعلية لعناصر واجهة المستخدم.
  • إنشاء تأثيرات بصرية جذابة في صفحات الويب.

باختصار، خاصية animations في CSS تُوفر إمكانات قوية لإنشاء حركات ديناميكية وتأثيرات بصرية تُثري تجربة المستخدم في صفحات الويب.