CSS/@keyframes

القاعدة ‎@keyframes في CSS تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات transition.

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

لاستخدام الإطارات المفتاحية، فأنشِئ قاعدة ‎@keyframes لها اسمٌ معيّن وأسنده إلى الخاصية animation-name، ويجب أن يكون لكل قاعدة ‎@keyframes سلسلة من مُحدِّدات الإطارات (keyframe selectors)، التي تُحدِّد النسبة المئوية التي سيقع عندها الإطار المفتاحي. لاحظ أنَّ بالإمكان ذكر النسب المئوية بأي ترتيب نشاء، وستُستخدَم حسب ترتيب وقوعها (وليس تعريفها).

ملاحظات الاستخدام

قائمة الإطارات

إذا لم تُوفِّر هذه القاعدة حالة البداية أو النهاية (والتي هي 0% أو from، و 100% أو to) فستستخدم المتصفح الأنماط المُطبَّقة على العنصر لحالة البداية والنهاية، وستُجرى الحركة بينهما.

لاحظ أنَّ المتصفح سيتجاهل الخاصيات التي لا يمكن تحريكها.

التكرارات

إذا كانت هنالك أكثر من مجموعة إطارات مفتاحية بنفس الاسم، فستستخدم آخر مجموعة مُعرَّفة، وإذا تكررت النسبة المئوية نفسها لتعريف أحد الإطارات المفتاحية، فستعتمد آخر قيمة منها.

عدم استخدام بعض الخاصيات في بعض الإطارات المفتاحية

إذا لم تُستعمَل بعض الخاصيات في كل إطار مفتاحي، فستعتمد القيمة بالتوسط (interpolation) إن أمكن ذلك، أما الخاصيات التي لا يمكن حساب قيمتها هكذا فلن تخضع للحركة. مثال:

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

لاحظ أنَّ خاصية top هنا قد حُرِّكَت في الإطارات المفتاحية 0% و 30% و 100%، والخاصية left قد حُرِّكَت في الإطارات المفتاحية 0% و 68% و 100%.

تعريف الإطار المفتاحي أكثر من مرة

إذا عُرِّف الإطار المفتاحي عدِّة مرات، واختلفت الخاصيات المستعملة في كل مرة، فستؤخذ القيم والخاصيات المُعرَّفة في آخر إطار مُعرَّف. فمثلًا:

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

لاحظ انَّ الإطار المفتاحي 50% مُكرَّر مرتين، ولن تُستعمَل إلا القاعدة top: 10px وستهمل جميع القيم والخاصيات الأخرى.

استخدام ‎!important في الإطار المفتاحي

أيّة قواعد تستعمل معها ‎!important سيتم تجاهلها كلها:

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* سيتم تجاهل القاعدة كلها */
  to   { margin-top: 100px; }
}

@keyframes important2 {
  from { margin-top: 50px;
         margin-bottom: 100px; }
  to   { margin-top: 150px !important; /* سيتم تجاهل القاعدة كلها */
         margin-bottom: 50px; }
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	4.0 (مع السابقة -webkit-) 43.0	5.0 (مع السابقة -moz-) 16.0	10	15.0 (مع السابقة -webkit-) 30.0	5.1 (مع السابقة -webkit-) 9.0

البنية العامة

القيمة <custom-ident>

اسم قائمة الإطارات المفتاحية.

القيمة from

كلمة محجوزة تُكافئ النسبة المئوية 0% وتُشير إلى الإطار المفتاحي في بداية الحركة.

القيمة to

كلمة محجوزة تُكافئ النسبة المئوية 100% وتُشير إلى الإطار المفتاحي في نهاية الحركة.

القيمة <percentage>

نسبة مئوية من زمن الحركة التي سيقع فيها الإطار المفتاحي.

البنية الرسمية

@keyframes <keyframes-name> {
  <keyframe-block-list>
}

حيث:

<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+

حيث:

<keyframe-block> = <keyframe-selector># {
  <declaration-list>
}

حيث:

<keyframe-selector> = from | to | <percentage>

مصادر ومواصفات

• مسودة CSS Animations.