ماذا تعني keyframes في CSS ?

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

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

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

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

أيضاً يمكنك الإطلاع على المزيد من هنا على موسوعة حسوب