CSS/Topics/Animation
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
| الخاصية | الوصف |
|---|---|
@keyframes
|
القاعدة @keyframes في لغة CSS تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات transition.
|
animation
|
الخاصية animation في لغة CSS هي خاصية مختصرة تضبط قيم مختلف خاصيات لغة CSS المتعلقة بالحركات وهي animation-name و animation-duration وanimation-timing-function و animation-delay و animation-iteration-count و animation-direction و animation-fill-mode وanimation-play-state.
|
animation-delay
|
تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة. |
animation-direction
|
تُحدِّد إذا كان يجب تشغيل الحركة إلى الأمام (forwards) أو إلى الخلف (backwards) أو التبديل بينهما. |
animation-duration
|
تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة. |
animation-fill-mode
|
تُحدِّد كيف يجب أن تُطبِّق حركات لغة CSS قيم الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة. |
animation-iteration-count
|
تُحدِّد عدد مرات تكرار دورة الحركة حتى توقف الحركة، وإذا حُدِّدت أكثر من قيمة فسيتم استخدام القيمة التي تلي القيمة التي طُبِّقَت سابقًا عند إعادة تشغيل الحركة، إلى أن نعود إلى القيمة الأولى بعد استخدام آخر قيمة. |
animation-name
|
تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر، وكل اسم يجب أن يُشير إلى قاعدة @keyframes التي تُعرِّف قيم الخاصيات اللازمة للحركة.
|
animation-play-state
|
تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا، ويمكن الحصول على قيمة هذه الخاصية عبر JavaScript لمعرفة حالة الحركة، ويمكن أيضًا استعمال JavaScript لضبط قيمتها لتوقيف الحركة مؤقتًا أو استئنافها. |
animation-timing-function
|
تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات لغة CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة. |
| يمكنك الاستزادة حول موضوع الحركات والتحريك عبر لغة CSS بقراءة: | |