CSS/animation-timing-function

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