الفرق بين المراجعتين لصفحة: «CSS/animation-timing-function»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-timing-function</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>animation-timing-function</code>}}</noinclude> | ||
الخاصية <code>animation-timing-function</code> في CSS تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة. | الخاصية <code>animation-timing-function</code> في CSS تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | |||
|- | |||
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | |||
|<code>ease</code> | |||
|- | |||
! scope="row" |تُطبَّق على | |||
|جميع العناصر. | |||
|- | |||
! scope="row" |قابلة للوراثة | |||
|لا | |||
|- | |||
!قابلة للتحريك | |||
|لا | |||
|- | |||
! scope="row" |القيمة المحسوبة | |||
|كما حُدِّدَت. | |||
|} | |||
من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/><syntaxhighlight lang="css"> | من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/><syntaxhighlight lang="css"> | ||
| سطر 25: | سطر 44: | ||
animation-timing-function: unset; | animation-timing-function: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== دعم المتصفحات == | == دعم المتصفحات == | ||
| سطر 68: | سطر 70: | ||
أيّة دالة توقيت مُعرَّفة داخل كتلة إطار مفتاحي ستُطبَّق على ذلك الإطار المفتاحي فقط، وإذا لم تُحدَّد دالةٌ خاصةٌ بالإطار المفتاحي فستستعمل دالة التوقيت المُحدَّدة لكامل الحركة. | أيّة دالة توقيت مُعرَّفة داخل كتلة إطار مفتاحي ستُطبَّق على ذلك الإطار المفتاحي فقط، وإذا لم تُحدَّد دالةٌ خاصةٌ بالإطار المفتاحي فستستعمل دالة التوقيت المُحدَّدة لكامل الحركة. | ||
=== | === <code>[[CSS/timing-function|<timing-function>]]</code> === | ||
كل | كل <code>[[CSS/timing-function|<timing-function>]]</code> تُمثِّل الدالة المرتبطة بالخاصية التي ستُخضع للحركة والمُعرَّفة في الخاصية <code>[[CSS/animation-name|animation-name]]</code>. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
| سطر 75: | سطر 77: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/animation|animation]]</code> والخاصيات الفرعية التي تضبطها هذه الخاصية وهي <code>[[CSS/animation-name|animation-name]]</code> و <code>[[CSS/animation-duration|animation-duration]]</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>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
المراجعة الحالية بتاريخ 10:32، 9 سبتمبر 2018
الخاصية animation-timing-function في CSS تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة.
بطاقة الخاصية
| القيمة الابتدائية | ease
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.
/* كلمات محجوزة */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* دوال */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);
/* عدِّة قيم */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* القيم العامة */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 4.0 (مع السابقة -webkit-)
43.0 |
5.0 (مع السابقة -moz-)
16.0 |
10 | 15.0 (مع السابقة -webkit-)
30.0 |
5.1 (مع السابقة -webkit-)
9.0 |
البنية العامة
للحركات التي لها إطارات مفتاحية (keyframes)، ستُطبَّق دالة التوقيت بين الإطارات المفتاحية وليس على كامل الحركة، أي أنَّ دالة التوقيت ستُطبَّق من بداية أحد الإطارات المفتاحية حتى نهايته.
أيّة دالة توقيت مُعرَّفة داخل كتلة إطار مفتاحي ستُطبَّق على ذلك الإطار المفتاحي فقط، وإذا لم تُحدَّد دالةٌ خاصةٌ بالإطار المفتاحي فستستعمل دالة التوقيت المُحدَّدة لكامل الحركة.
<timing-function>
كل <timing-function> تُمثِّل الدالة المرتبطة بالخاصية التي ستُخضع للحركة والمُعرَّفة في الخاصية animation-name.
البنية الرسمية
animation-timing-function: <timing-function>#;
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-nameوanimation-durationوanimation-delayوanimation-iteration-countوanimation-directionوanimation-fill-modeوanimation-play-state.
مصادر ومواصفات
- مسودة CSS Animations.