مثال
تلعب الرسوم المتحركة بنفس السرعة من البداية إلى النهاية:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
تحدد توقيت وظيفة حيوية في منحنى سرعة للرسوم المتحركة.
يحدد منحنى السرعة والوقت يستخدم الرسوم المتحركة للتغيير من مجموعة واحدة من أساليب المغلق إلى آخر.
يستخدم منحنى السرعة لإجراء التغييرات بسلاسة.
| القيمة الافتراضية: | ease |
|---|---|
| وارث: | no |
| Animatable: | no. Read about animatable |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.animationTimingFunction="linear" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-، -moz-، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | تسعة 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
CSS بناء الجملة
animation-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; تستخدم توقيت وظيفة حيوية وظيفة رياضية، ودعا منحنى بيزيه مكعب، لجعل منحنى السرعة. يمكنك استخدام القيم الخاصة بك في هذه الوظيفة، أو استخدام واحدة من القيم المحددة مسبقا:
قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| linear | الرسوم المتحركة لديها نفس السرعة من البداية الى النهاية | العبها " |
| ease | القيمة الافتراضية. الرسوم المتحركة لديه بداية بطيئة، ثم بسرعة، قبل أن تنتهي ببطء | العبها " |
| ease-in | الرسوم المتحركة لديه بداية بطيئة | العبها " |
| ease-out | الرسوم المتحركة لديه نهاية بطيئة | العبها " |
| ease-in-out | الرسوم المتحركة على حد سواء بداية بطيئة ونهاية بطيئة | العبها " |
| 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: حاول القيم المختلفة في جربه قسم نفسك أدناه.
مزيد من الأمثلة
مثال
لفهم مختلف القيم وظيفة توقيت أفضل؛
وهنا خمس مختلفة <div> العناصر مع خمس قيم مختلفة:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard
syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
انها محاولة لنفسك » مثال
نفس المثال أعلاه، ولكنها تعرف منحنيات السرعة مع وظيفة بيزيه المكعب:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);} انها محاولة لنفسك » صفحات ذات صلة
CSS3 البرنامج التعليمي: CSS3 متحركة
HTML DOM المرجع animationTimingFunction property