سبد (0)

animation-timing-function

مثال (animation-timing-function)

اجرای یک انیمیشن با سرعت یکسان، از ابتدا تا انتها:

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.


پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation-timing-function را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.


تعریف و کاربرد

با استفاده از خصوصیت animation-timing-function، می توانید منحنی سرعت انیمیشن را تعیین نمایید.

منحنی سرعت، زمانی را که یک انیمیشن برای تغییر از یک دسته استایل CSS به دسته ای دیگر استفاده می کند را تعیین می کند.

با استفاده از منحنی سرعت، می توانید تغییرات را آرامتر نمایش دهید.

مقدار پیشفرض ease
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationTimingFunction="linear"

نحوه استفاده

animation-timing-function: value;

برای تنظیم منحنی سرعت در خصوصیت animation-timing-function، می توانید از یک تابع ریاضی بنام ()cubic-bezier استفاده نمایید. همچنین می توانید مقادیر از پیش تعریف شده اند را استفاده نمایید.

مقدارتوضیحاتنمایش دادن
linear انیمیشن از ابتدا تا انتها سرعت یکسانی دارد. نمایش دادن »
ease انیمیشن  شروع کندی دارد، سپس تند می شود و قبل از اینکه پایان یابد کند می شود. (مقدار پیش فرض) نمایش دادن »
ease-in انیمیشن شروع کندی دارد. نمایش دادن »
ease-out انیمیشن پایان کندی دارد. نمایش دادن »
ease-in-out انیمیشن، شروع و پایان کندی دارد. نمایش دادن »
cubic-bezier(n,n,n,n) مقادیر ورودی شما در تابع cubic-bezier منحنی سرعت را تعیین می کنند.
مقادیر مجاز، اعداد 0 تا 1 هستند.
 

نکته: می توانید مقادیر مختلف این خصوصیت را در قسمت "خودتان امتخان کنید" زیر مشاهده نمایید.


مثالs

مثال - خودتان امتحان کنید

مثال (animation-timing-function)

برای تشخیص بهتر تفاوت بین مقادیر خصوصیت animation-timing-function، در زیر 5 <div> با 5 مقدار مختلف آورده شده است:

/* W3C and Opera: */
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}
خودتان امتحان کنید »

مثال (animation-timing-function)

همان مثال بالا، اما سرعت منحنی انیمیشن با استفاده از تابع cubic-bezier تعریف شده است:

/* W3C and Opera: */
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#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);}
خودتان امتحان کنید »

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان