الفرق بين المراجعتين لصفحة: «CSS/Topics/Animation»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 4: | سطر 4: | ||
|- | |- | ||
|<code>[[CSS/@keyframes|@keyframes]]</code> | |<code>[[CSS/@keyframes|@keyframes]]</code> | ||
|القاعدة <code>@keyframes</code> في CSS تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات <code>[[CSS/transition|transition]]</code>. | |القاعدة <code>@keyframes</code> في لغة CSS تتحكم بالخطوات البينية (intermediate steps) في سلسلة حركات CSS عبر تعريف أنماط للإطارات المفتاحية (keyframes)، مما يعطينا تحكمًا كبيرًا في أنماط العنصر في الخطوات البينية بالمقارنة مع الانتقالات <code>[[CSS/transition|transition]]</code>. | ||
|- | |- | ||
|<code>[[CSS/animation|animation]]</code> | |<code>[[CSS/animation|animation]]</code> | ||
|الخاصية <code>animation</code> في CSS هي خاصية مختصرة تضبط قيم مختلف خاصيات CSS المتعلقة بالحركات وهي <code>[[CSS/animation-name|animation-name]]</code> و <code>[[CSS/animation-duration|animation-duration]]</code> و<code>[[CSS/animation-timing-function|animation-timing-function]]</code> و <code>[[CSS/animation-delay|animation-delay]]</code> و <code>[[CSS/animation-iteration-count|animation-iteration-count]]</code> و <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-fill-mode|animation-fill-mode]]</code> و<code>[[CSS/animation-play-state|animation-play-state]]</code>. | |الخاصية <code>animation</code> في لغة CSS هي خاصية مختصرة تضبط قيم مختلف خاصيات لغة CSS المتعلقة بالحركات وهي <code>[[CSS/animation-name|animation-name]]</code> و <code>[[CSS/animation-duration|animation-duration]]</code> و<code>[[CSS/animation-timing-function|animation-timing-function]]</code> و <code>[[CSS/animation-delay|animation-delay]]</code> و <code>[[CSS/animation-iteration-count|animation-iteration-count]]</code> و <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-fill-mode|animation-fill-mode]]</code> و<code>[[CSS/animation-play-state|animation-play-state]]</code>. | ||
|- | |- | ||
|<code>[[CSS/animation-delay|animation-delay]]</code> | |<code>[[CSS/animation-delay|animation-delay]]</code> | ||
| سطر 19: | سطر 19: | ||
|- | |- | ||
|<code>[[CSS/animation-fill-mode|animation-fill-mode]]</code> | |<code>[[CSS/animation-fill-mode|animation-fill-mode]]</code> | ||
|تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيم الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة. | |تُحدِّد كيف يجب أن تُطبِّق حركات لغة CSS قيم الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة. | ||
|- | |- | ||
|<code>[[CSS/animation-iteration-count|animation-iteration-count]]</code> | |<code>[[CSS/animation-iteration-count|animation-iteration-count]]</code> | ||
| سطر 31: | سطر 31: | ||
|- | |- | ||
|<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: نصائح وحيل]] | |||
|} | |} | ||
المراجعة الحالية بتاريخ 15:54، 7 أكتوبر 2022
| الخاصية | الوصف |
|---|---|
@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 بقراءة: | |