خصوصية Style animationTimingFunction

التعريف والاستخدام

animationTimingFunction يحدد سرعة التحرك في التحرك.

يحدد معدل السرعة وقت التحرك من مجموعة من النمط CSS إلى مجموعة أخرى.

معدل السرعة يستخدم للتغيرات السلسة.

مثال

تغيير خصوصية animationTimingFunction لعنصر <div>:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

جرب بنفسك

النحو

إرجاع خصوصية animationTimingFunction:

object.style.animationTimingFunction

إعداد خصوصية animationTimingFunction:

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

قيمة الخصوصية

القيمة وصف
linear سرعة التحرك ثابتة من البداية إلى النهاية.
ease القيمة الافتراضية. يبدأ التحرك ببطء، ثم يسرع، ثم ينتهي ببطء.
ease-in التحرك يبدأ ببطء.
ease-out التحرك ينتهي ببطء.
ease-in-out التحرك يحتوي على بداية بطيئة ونهاية بطيئة.
cubic-bezier(n, n, n, n)

حدد قيمك الخاصة في وظيفة البيزيير الثلاثية.

القيم الممكنة هي أرقام من 0 إلى 1.
initial أعد هذا الخصوصية إلى قيمته الافتراضية. يرجى الرجوع إلى initial.
inherit يرث هذا الخصوصية من عنصر الأب. يرجى الرجوع إلى inherit.

تفاصيل تقنية

القيمة الافتراضية: ease
القيمة المعدلة: السلسلة، تعبر عن خصائص animation-timing-function.
إصدار CSS: CSS3

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

animationTimingFunction هي خاصية CSS3 (1999).

يدعم جميع المتصفحات بشكل كامل:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
دعم دعم دعم دعم دعم 11

الصفحات ذات الصلة

دليل CSS:}خصائص animation-timing-function