CSS transition-timing-function کا پرزوگاری

定义和用法

یہ پرزنٹیشن ویلو تبدیلی کی رفتار کا اثر دینا اپنے عرصے کے ساتھ تبدیل کرتا ہے۔

دوسرے ملاحظات:

سی ایس ایس درس:CSS کا تریٹنسی

ایچ تی ایم ال ڈوم رجسٹریٹرانزیشن-ٹائمنگ-فونکشن پرزنٹیشن ویلو

مثال

مثال 1

شروع سے کم سے کم ختم تک کی یکساں رفتار کا اثر دینا:

ڈی وی
{
ٹرانزیشن-ٹائمنگ-فونکشن: لائنر;
}

آپ خود کا تجربہ کریں

سی ایس ایس گرامر

ٹرانزیشن-ٹائمنگ-فونکشن: لائنر|کم سے کم|کم سے کم شروع|کم سے کم ختم|کم سے کم شروع اور ختم|کمپ یون بزیکر-
بزیکر(ن,ن,ن,ن);

پرزنٹیشن ویلو

مقدار وصف
لائنر کم سے کم شروع سے کم سے کم ختم تک کی یکساں رفتار کی تبدیلی کا اثر دینا (کمپ یون بزیکر(0,0,1,1))۔
سادگی کم سے کم شروع، پھر تیزی سے تبدیل، پھر کم سے کم ختم کی جانب کی تبدیلی کا اثر دینا (کمپ یون بزیکر(0.25,0.1,0.25,1))۔
کم سے کم شروع کم سے کم شروع کی جانب کی تبدیلی کا اثر دینا (کمپ یون بزیکر(0.42,0,1,1))۔
کم سے کم ختم کم سے کم ختم کی جانب کی تبدیلی کا اثر دینا (کمپ یون بزیکر(0,0,0.58,1))۔
کم سے کم شروع اور ختم کم سے کم شروع اور ختم کی جانب کی تبدیلی کا اثر دینا (کمپ یون بزیکر(0.42,0,0.58,1))۔
کمپ یون بزیکر(ن,ن,ن,ن) کمپ یون فونکشن میں اپنے اعداد کا تعین کر سکتے ہیں۔ ممکنہ اعداد 0 سے 1 کے درمیان کے ہو سکتے ہیں。

نکات:مختلف کی اعداد کا تجربہ کریں، تاکہ ان کا کام کاج کا فہم کریں:

تکنیکی تفصیلات

مقصد: سادگی
وراثت: نہیں
ورژن: سی ایس ایس3
جسکریپٹ گرامر: آبجیکٹ.style.transitionTimingFunction="linear"

بھیتیار مثال

مثال 2

مختلف کی اعداد کا فہم کرنے کے لئے، نیچے کی پانچ مختلف div عناصر دیکھئے جائیں:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

آپ خود کا تجربہ کریں

مثال 3

مثال میں ساتھ ساتھ، لیکن cubic-bezier کے ذریعے رفتار کی منحنی کا قیاس:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

آپ خود کا تجربہ کریں

براوزر کی مدد

جداول میں دیئے گئے نمبر، اس کی ملحقیت کا پہلا براوزر ورژن کا ذکر کرتے ہیں。

عدد کا استعمال -webkit-،-moz- یا -o- کا پیشوند دار سائنسی ورژن کا پہلا ورژن کا استعمال کیا جاتا ہے。

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-