CSS/animation-timing-function

الخاصية animation-timing-function في CSS تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة، أي أنها تسمح لك بتحديد ما هو منحني التسارع (acceleration curve) للحركة خلال دورة واحدة.

من الشائع استخدام الخاصية المختصرة 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;

القيمة الابتدائية	ease
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

دعم المتصفحات

الميزة	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.