الخاصية animation-timing-function

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية 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>#;

انظر أيضًا

مصادر ومواصفات