animation-timing-function
مثال (animation-timing-function)
اجرای یک انیمیشن با سرعت یکسان، از ابتدا تا انتها:
-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، می توانید از یک تابع ریاضی بنام ()cubic-bezier استفاده نمایید. همچنین می توانید مقادیر از پیش تعریف شده اند را استفاده نمایید.
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| linear | انیمیشن از ابتدا تا انتها سرعت یکسانی دارد. | نمایش دادن » |
| ease | انیمیشن شروع کندی دارد، سپس تند می شود و قبل از اینکه پایان یابد کند می شود. (مقدار پیش فرض) | نمایش دادن » |
| ease-in | انیمیشن شروع کندی دارد. | نمایش دادن » |
| ease-out | انیمیشن پایان کندی دارد. | نمایش دادن » |
| ease-in-out | انیمیشن، شروع و پایان کندی دارد. | نمایش دادن » |
| cubic-bezier(n,n,n,n) | مقادیر ورودی شما در تابع cubic-bezier منحنی سرعت را تعیین می کنند. مقادیر مجاز، اعداد 0 تا 1 هستند. |
نکته: می توانید مقادیر مختلف این خصوصیت را در قسمت "خودتان امتخان کنید" زیر مشاهده نمایید.
مثال - خودتان امتحان کنید
مثال (animation-timing-function)
برای تشخیص بهتر تفاوت بین مقادیر خصوصیت animation-timing-function، در زیر 5 <div> با 5 مقدار مختلف آورده شده است:
#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 تعریف شده است:
#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)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 10426
