خصوصیت animation-timing-function

مثال

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

animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */

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

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

    

مرورگرهای 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 هستند.		  

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

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

مثال

برای تشخیص بهتر تفاوت بین مقادیر خصوصیت 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;}

مثال

همان مثال بالا، اما سرعت منحنی انیمیشن با استفاده از تابع 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)