خاصية الاسم Animation Name
 

ى إسناد هذا التّحريك المعرف للعنصر، ولفعل ذلك نستخدم الخّاصية animation-name التي تقوم على تعريف القاعدة keyframe@ كقيمة لهذه الخاصية، مع العلم أن هذا التّعريف يتم على العنصر الذي نريد تطبيق الحركة عليه.

.stage:hover .ball {
animation-name: slide;
}
نلاحظ أننا أسندنا الإطار الرّئيسي لعملية التّحريك slide الّذي عرفنّاه في الأعلى إلى كلا الصّفّين المحددين لرسم الكرة stage و ball
ولكن تحديد قيمة animation-name فقط ليس كافٍ بل يجب تحديد خاصية animation-duration مع قيمتها لإخبار المتصفح الوقت الذي يحتاجه لإنهاء الحركة animation.

مدة التحريك animation duration، تابع التوقيت Timing Function والتأخير Delay
عندما نقوم بالتصريح عن الخاصية animation-name لعنصر ما فإن طريقة التّحريك ستكون مشابهة بشكل كبير للانتقال transition، حيث يحتاج لإكمال تعريفه إلى خصائص تحديد الفترة الزّمنية، تابع التوقيت، والتأخر الممكن أن يحصل.

لبدء عملية التّحريك نحتاج إلى تعريف الخاصية animation-duration والّتي تشبه خاصية الفترة الزّمنية المستخدمة في الانتقالات transition حيث نحدد هذه الفترة باستخدام الثّانية او أجزاء الثّانية.

.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
}
كما يمكن تحديد تابع التّوقيت animation-timing-function وقيمة التّأخير animation-delay على التّتالي. وتشبه هذه الخصائص مثيلاتها من الخصائص المستخدمة في الانتقالات، إن قيمة هذه الخّاصيات تعمل بشكل مشابه لعملها في الانتقالات transitions.

.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
}
في المثال القادم تقوم خاصية التحريك على جعل الكرة ترتد مرة خلال الحركة نحو اليسار، وهذا التصرف يحدث فقط في حال تم تمرير المؤشر فوق stage.
أولًا نبين الكرة من خلال التعليمات:

<div class="stage">
<figure class="ball"></figure>
</div>