الفرق بين المراجعتين ل"CSS/animation-timing-function"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 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"> | ||
مراجعة 11:50، 18 أغسطس 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>#;
مصادر ومواصفات
- مسودة CSS Animations.