مثال
وهناك تأثير الانتقال بنفس السرعة من البداية الى النهاية:
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
انها محاولة لنفسك » تعريف واستخدام
تحدد الخاصية الانتقال توقيت وظيفة منحنى سرعة تأثير انتقال.
هذه الخاصية تسمح تأثير انتقال لتغيير السرعة أكثر من مدته.
| القيمة الافتراضية: | ease |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.transitionTimingFunction="linear" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-، -moz- أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
CSS بناء الجملة
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;قيم الملكية
| القيمة | وصف |
|---|---|
| ease | القيمة الافتراضية. تحديد تأثير انتقال مع بداية بطيئة، ثم بسرعة، ثم تنتهي ببطء (equivalent to cubic-bezier(0.25,0.1,0.25,1) ) |
| linear | تحديد تأثير انتقال بنفس السرعة من البداية الى النهاية (equivalent to cubic-bezier(0,0,1,1) ) |
| ease-in | تحديد تأثير انتقال مع بداية بطيئة (أي ما يعادل cubic-bezier(0.42,0,1,1) ) |
| ease-out | تحديد تأثير انتقال مع نهاية بطيئة (أي ما يعادل cubic-bezier(0,0,0.58,1) ) |
| ease-in-out | تحديد تأثير انتقال مع بداية بطيئة ونهاية (أي ما يعادل cubic-bezier(0.42,0,0.58,1) ) |
| step-start | أي ما يعادل steps(1, start) |
| step-end | أي ما يعادل steps(1, end) |
| steps(int,start|end) | يحدد وظيفة التنقل، مع اثنين من المعلمات. تعين المعلمة الأولى في عدد من فترات في وظيفة. ويجب أن يكون عدد صحيح موجب (greater than 0) . المعلمة الثانية، الذي هو اختياري، إما قيمة "start" أو "end" ، وتحدد النقطة التي تغير القيم تحدث ضمن الفاصل الزمني. إذا تم حذف المعلمة الثانية، تم منحها فرصة قيمة "end" |
| cubic-bezier( n , n , n , n ) | تحديد القيم الخاصة بك في وظيفة بيزيه المكعب. القيم الممكنة هي قيم رقمية 0-1 |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
Tip: حاول قيم مختلفة في الأمثلة أدناه لفهم كيف يعمل!
مزيد من الأمثلة
مثال
إلى فهم أفضل للقيم وظيفة مختلفة: هنا خمسة عناصر شعبة مختلفة مع خمس قيم مختلفة:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standard
syntax */
#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;}
انها محاولة لنفسك » مثال
نفس المثال أعلاه، ولكن يتم تحديد منحنيات السرعة مع وظيفة بيزيه المكعب:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#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);}
انها محاولة لنفسك » صفحات ذات صلة
درس CSS: CSS3 التحولات
HTML DOM المرجع transitionTimingFunction property