دليل CSS

CSS @rules (RULES)

كامل خصائص CSS

خصائص backface-visibility في CSS خصائص animation-play-state في CSS3

استخدام خاصية animation-timing-function في CSS3 و أمثلة

خصائص animation-timing-function في CSS3 تحدد كيفية سير الرسوم المتحركة خلال كل دورة.

الجدول أدناه يلخص استخدام هذا الخصائص في سياق الاستخدام والتاريخ الإصدارات.

القيمة الافتراضية:	ease
تطبيقها على:	جميع العناصر::before و ::after الرموز الوهمية
الوراثة:	لا يوجد
يمكن تفعيله:	لايرجى الرجوع إلى خصائص الرسوم المتحركة.
الإصدار:	ميزات CSS3 الجديدة
JavaScript syntax:	object　　　object.style.animationTimingFunction="linear"

قواعد استخدام خاصية animation-timing-function

قواعد النحو لهذه الخاصية هي:

animation-timing-function:　linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

في هذا المثال، يتم عرض كيفية استخدام خاصية animation-timing-function.

النموذج

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　-webkit-animation-timing-function:　ease-in;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
　　　　animation-timing-function:　ease-in;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

اختبار لمعرفة‹/›

قيمة الخاصية

يصف الجدول أدناه قيم هذه الخاصية.

القيم	وصف
linear	يحدد أن يتحرك التحرك بسرعة ثابتة من الحالة الأولية إلى الحالة النهائية.
ease	مثل ease-in-out، ولكن يسرع في البداية ويبدأ في التبطيء قريبًا.
ease-in	يحدد أن يبدأ التحرك ببطء، ثم يسرع حتى الوصول إلى الحالة النهائية ويوقف التحرك فجأة.
ease-out	يحدد أن يبدأ التحرك بسرعة، ثم يتباطأ عند الوصول إلى الحالة النهائية.
ease-in-out	يحدد أن يبدأ التحرك ببطء، ثم يسرع ثم يتباطأ عند الوصول إلى الحالة النهائية.
`cubic-bezier(n,n,n,n)`	يحدد منحنى الثلاثي الأوجه. يُعرف أيضًا بمسار السرعة. القيم المحتملة هي أرقام بين 0 و1.
initial	تعيين هذه الخاصية إلى قيمتها الافتراضية.
inherit	إذا تم تحديد هذا، فإن العنصر المرتبط يستخدم قيمة حساب الخاصية timing-function للعنصر الأب.

مرونة المتصفح

مرونة متصفح الخاصية timing-function للتحرك، جميع المتصفحات الرئيسية تدعم هذه الخاصية.

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-

قراءة إضافية

يرجى الرجوع إلى التعليمات التالية:حركة CSS3.

خصائص وإرشادات ذات صلة:animation,animation-name,animation-duration,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.

خصائص backface-visibility في CSS خصائص animation-play-state في CSS3