الفرق بين المراجعتين ل"CSS/Topics/Animation"
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (إضافة مقالات الحركات) |
|||
| سطر 32: | سطر 32: | ||
|<code>[[CSS/animation-timing-function|animation-timing-function]]</code> | |<code>[[CSS/animation-timing-function|animation-timing-function]]</code> | ||
|تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة. | |تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة. | ||
| + | |- | ||
| + | | colspan="2" |يمكنك الاستزادة حول موضوع الحركات والتحريك عبر CSS بقراءة: | ||
| + | * [[CSS/detecting CSS animation support|الكشف عن دعم المتصفحات لحركات CSS]] | ||
| + | * [[CSS/using CSS animations|استخدام حركات CSS]] | ||
| + | * [[CSS/CSS animations tips|حركات CSS: نصائح وحيل]] | ||
|} | |} | ||
مراجعة 11:08، 8 أكتوبر 2019
| الخاصية | الوصف |
|---|---|
@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 بقراءة: | |